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。< / p>

<强> 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，我能够解决问题： - *

我将脚本绑定到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);
    });
});

更新组件后Javascript不起作用

2 个答案: