jQuery .click() 不会触发，但 onclick 会触发答案

【问题标题】：jQuery .click() doesn't fire but onclick doesjQuery .click() 不会触发，但 onclick 会触发
【发布时间】：2014-10-15 09:25:35
【问题描述】：

我在 jquery 中有一个 $each 循环，它将行添加到这样的表中：

                $.each(result, function (index) {
                    var data = result[index];
                    cameraIcon = GetCameraIcon();
                    cameraIcon = cameraIcon.replace("$cameraId", data.CameraFQID);                       
                    var tr = "<tr><td>" + cameraIcon + "</td><td>" + icon + '</td><td>' + timestamp.format('DD/MM/YYYY HH:mm:ss') + '</td><td>' + data.DeviceLink + '</td><td>' + data.EventMessage + '</td><td>' + data.CardId + '</td></tr>';
                    $('#eventTable tr:first').after(tr);
                });

    function GetCameraIcon() {            
        return "<a href='javascript:;' class='cameraButton' id='$cameraId'><i class=\'fa fa-camera\'></i></a>";
    }

我的问题是：为什么我的 jquery 方法没有触发？

$(".cameraButton").click(function () {
            alert('clicked')
        });

但是，当我这样做时：

<a href='javascript:;' onclick=\"alert('clicked')\">

它有效。

我的猜测是某处粗心的错误，但我无法确定或弄清楚

【问题讨论】：

看起来你没有一个带有 .cameraButton 类的元素。

标签： javascript jquery

【解决方案1】：

这可能是事件委托。添加到表中的新行在 jQuery 绑定到其事件时不存在，因此您必须使用 .on() 来捕获事件。

试试：

$(document).on("click", ".cameraButton", function () {
     alert('clicked');
});

记得在语句末尾添加分号。

【讨论】：

【解决方案2】：

如果动态添加元素，则需要通过on 方法使用委托事件。这应该可以解决问题

$(document).on('click', '.cameraButton', function() {
    ...
}

直接事件将不起作用，因为在您执行语句 $(".cameraButton").click(function () {} 时元素需要已经存在于您的页面上。

考虑到$(".cameraButton") 会返回一个空数组，以防万一还没有类.cameraButton 的元素，所以单击不会绑定任何内容。

【讨论】：

【解决方案3】：

试试这个

document.getElementById("cameraId").addEventListener("click", function(){
alert("Hello World!");
});

【讨论】：