更新组件后，Javascript无法工作

Question

上下文
在对话框中，用户可以按下按钮来填充名为qPdt的现有数据表。当他点击一行时，我希望将行文本插入到某个inputTextArea中。

问题
结果是，如果我打开对话框并单击任何一行，一切都会正常工作，正如预期的那样。但是，如果我打开对话框并按下按钮，我的脚本将不再工作/不再被调用。我必须关闭对话框并重新打开它才能使脚本工作。

可能我在这里缺少一些javascript/jsf基础知识。任何提示都很好：(

代码

<script>
$('#accordion\:duoDlgForm2\:qPdt tr').on('click', function() {
  var $item = $(this).closest("tr").find("td:nth-child(1)").text().trim();
  $("#accordion\:duoDlgForm2\:rt1Selected").append($item);
  });
</script>

也尝试过(位于表单内部和外部(

<script>
$(document).ready(function() {
  $('#accordion\:duoDlgForm2\:qPdt').on('click','tr',function() {
  var $item = $(this).closest("tr").find("td:nth-child(1)").text().trim();
  $("#accordion\:duoDlgForm2\:rt1Selected").append($item);
  });
});
</script>

数据表：

<p:scrollPanel mode="native">  
  <p:dataTable id="qPdt" var="p" value="#{regelBean.queriedParams}" scrollable="false"
    emptyMessage="x" rowKey="#{p}" selection="" selectionMode="single">                            
    <p:column>#{p.name}
      <f:facet name="header" style="">Parameter</f:facet>
    </p:column>
  </p:dataTable>
</p:scrollPanel>

按钮打开对话框

<p:commandButton id="selectButton" value="?" update=":stmtDetailForm :newDuoDlg" oncomplete="PF('newDuoDialog').show()" actionListener="#{regelBean.selectButtonHit(tVar)}">

按钮来填充数据表

<p:commandButton value="&lt;" update="qPdt regelDetail sp2" action="#{regelBean.findParams()}"/>

PF 4.0，IE9，与合作包括。

Answer 1

可能您在某个时候更新了对话框、手风琴或表单，这会导致事件崩溃。。。尝试将事件绑定到更大的东西上，比如document。

JS

function bindDataTableSelection() {
   $(document).on('click', '.ui-datatable-selectable', function() {
     itemText = $('.ui-datatable-selectable.ui-state-highlight')
               .find("td:nth-child(1)").text().trim();
     $("#accordion\:duoDlgForm2\:rt1Selected").append(itemText);
   });
}

现在调用document.ready 中的函数

阅读更多：

• Primefaces的部分更新是否破坏了JQuery事件绑定

希望这能帮助

Answer 2

多亏了Hatem Alimam，我才解决了这个问题：-*

我将脚本绑定到了scrollPanel，而不是数据表本身。这项工作：

$(document).ready(function() {
    $('#accordion\:duoDlgForm2\:scrollPanelID').on('click','tr',function() {
    var $item = $(this).closest("tr").find("td:nth-child(1)").text().trim();
    $("#accordion\:duoDlgForm2\:rt1Selected").append($item);
    });
});