javascript - jQuery 事件未触发。

Question

我已经在网站上上下搜索，并针对事件未触发的其他人所遇到的问题进行了故障排除。

我可以确认以下问题不是问题:

1. 重复的 ID - 使用类而不是 ID 来确定
2. $(ready) 的内部/外部。我已经尝试过这两种选择
3. 没有缺少脚本
4. 这不是 jQuery mobile 添加类。我以为这是问题所在，但结果是 told it's not

$(".deleteListItem").click(getDeviceIDforRemoval);是未触发的事件

我强烈怀疑某些东西在准备好之前就被调用了，反之亦然，但不知道在哪里。奇怪的是。真正困扰我的是后续和类似的事件 $("#remove_device").click(removeDevices); 正在触发。我比较了两者，看看是否有任何差异，但看不出它们。

任何帮助，甚至提示，我们将不胜感激。相关代码如下:

$(document).ready(function() {

    start();
    loadConfig();
    loadDevices();

    $(".deleteListItem").click(getDeviceIDforRemoval);   //why isn't this firing??!?!?


    $("#remove_device").click(removeDevices); //fires

});

...
...

var devices = [];

function loadDevices(onSuccess,onError,onWrongPassword) {
    Server.queryDevices(function (data) {
        devices = data;
        showDevices();
        if(onSuccess!==undefined)onSuccess();
    },onError,onWrongPassword);
}


function showDevices() { //works fine
    for (var i = 0; i < devices.length; i++) {
        var value = devices[i].Value;
        var geraete_id = devices[i].Key;
        if (value.Name != "") { // if name exists, use that as heading, else, use UDID
            $("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5>" + value.Name + "</h5>"
            + "<p>" + value.LastUsedBy + "</p>"
            + "<p>" + geraete_id + "</p>"
            + "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
            + "<a href='#confirm_device_removal' **class='deleteListItem'** data-rel='dialog'></a></li>");
        }
        else {
            $("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5>" + geraete_id + "</h5>"
                + "<p>" + value.LastUsedBy + "</p>"
                + "<p>Anonymous User</p>"
                + "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
                + "<a href='#confirm_device_removal' **class='deleteListItem'** data-rel='dialog'></a></li>");

        }
    }
    $("#geraete-list").listview("refresh");
}



function getDeviceIDforRemoval(){
    var $DIDtoRemove = $(this).parent().attr("id");
    $(".device_to_remove").text(devices[$DIDtoRemove].Key); // sends the device ID into confirm submission dialog
}

function removeDevices(){
    var geraetID =  $(".device_to_remove").text(); //retrieves the DID inserted by above function
    removeDevice(geraetID,loadDevices);
}

function removeDevice(udid,onSuccess){
    Server.removeDevice(udid,onSuccess);
}

Answer 1

您需要使用event delegation因为元素是动态创建的

$("#geraete-list").on('click', ".deleteListItem", getDeviceIDforRemoval);