jQuery on（）不能用于动态添加事件

Question

我使用PHP curl将数据发送到侦听端口并在屏幕上输出数据，效果很好。 这是我发送的数据：

$arr = array("message" => "<u>".$abc."</u> at <u>".$currentDate."</u> || <a href=#>Call</a> || <a href=#>SMS</a> || <u class='caller'>N/A</u>");
$msgString = json_encode($arr);
$ch = curl_init('http://localhost:8123/message');
curl_setopt($ch,
            CURLOPT_CUSTOMREQUEST,
            "POST");
curl_setopt($ch,
            CURLOPT_POSTFIELDS,
            $msgString);                                                          
curl_setopt($ch,
            CURLOPT_RETURNTRANSFER,
            true);                                                              
curl_setopt($ch,
            CURLOPT_HTTPHEADER,
            array('Content-Type:application/json',
                  'Content-Length:' . strlen($msgString)));
$result = curl_exec($ch);

这很完美。然后我使用Chrome来观看元素。所有元素都可以。 接下来我使用jQuery绑定它们的click函数，但是我无法触发它们。

//alert("123");
$('.caller').on("click", function(){
  console.log("11");
});

PS：代码在外部js文件中，我在主文件中正确包含jquery库。我使用警报测试，它的工作原理 我认为问题是js代码。我不知道为什么我不能触发click事件。有人能告诉我为什么吗？谢谢！

Answer 1

尝试使用Direct and delegated events：

$(document).on("click", '.caller', function(){
  console.log("11");
});

更好的选项是传递动态更新的.caller父元素的选择器。

Answer 2

试试这个

jQuery(document).on("click",".caller",function() {
console.log("11")
});

Answer 3

您在哪里找到附加处理程序的函数：？

$('.caller').on("click", function(){
     console.log("11");
});

如果在$(document).ready或同等内容中调用此内容，则它只会附加到已创建的.caller元素 - 它将不会附加到将来创建的元素。为此，每次将新的.caller元素添加到DOM时，您都需要再次调用该函数。