更新组件后 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's partial update breaks JQuery event binding?

希望对你有帮助

Answer 2

感谢 Hatem Alimam，我能够解决这个问题：-*

我将脚本绑定到滚动面板而不是数据表本身。这有效：

$(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);
    });
});