Question

我想用getData.php文件中的动态内容填充jQuery对话框。到目前为止通过以下方式工作正常：

$("#buttonGetData").click(function() {

  $.get("getData.php", function(data){
      $("#dialog").html(data);
      $("#dialog").dialog();
      return false;
  });
});

getData.php只是提供了类似的内容：

<p id="data1" class="data">data1</p>
<p id="data2" class="data">data2</p>
<p id="data3" class="data">data3</p>

我现在的问题是：如何为每个数据行添加动态点击侦听器，以便我可以在我的网站中使用点击的数据？我希望每个'p'都可以点击，然后使用里面的数据将其内容设置为'textarea'。

问题似乎是，新的动态添加的行不是来自站点的JS的一部分，所以我无法通过clickListener访问它们。

如何正确完成？谢谢！

Answer 1

当您使用Ajax获取与HTML相关的数据结果时，就像您使用$（get）...一样，您从Ajax新生成的html不能用于jQuery代码或者换句话说jQuery / JS不能识别您的新内容添加了从Ajax生成的html元素。有一种方法可以达到您所需的结果。您可以将带有html代码的jQuery / JS代码从您的文件（getData.php）发送到Ajax作为String。在getData.php中，您可以像这样回应。

echo '<p id="data1" class="data">data1</p>';
echo '<script>';
echo "$(document).on('click', '#data1', function(){alert('DATA1 Clicked');});"
echo '</script>';
die();

以上可能是非常直接的答案，所以还有另一种方式可能更具有信念。您还可以使用基于事件处理程序的委托。例子：

$("#dialog").on("click","p", function(){
  alert("DATA1 Clicked");
 // your code to add content of this element to textarea
});

$("#dialog").on("click","#data1", function(){
  alert("DATA1 Clicked");
 // your code to add content of this element to textarea
});

$(document).on('click', '#data1', function(){
    alert("DATA1 Clicked");
 // your code to add content of this element to textarea
});

其中一个应该能够解决问题。

打开带有动态内容的jQuery UI对话框，然后动态响应对话框

1 个答案: