Question

我在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')\">

有效。

我的猜测在某处是一些粗心的错误，但我无法查明或弄明白

Answer 1

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

尝试：

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

请记住在结尾语句中添加分号。

Answer 2

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

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

直接事件无法正常工作，因为在您执行语句$(".cameraButton").click(function () {}时，您的页面上已经存在元素。

考虑到$(".cameraButton")返回一个空数组，以防没有包含类.cameraButton的元素，所以click不会被绑定。

Answer 3

试试这个

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

jQuery .click（）不会触发但是onclick会触发

3 个答案: