Question

我正在使用带有.getJSON方法的.each方法打印出JSON文件中的对象。这工作正常，但我无法向已打印的元素添加单击功能。我正在尝试使用“click”ID将函数绑定到div。

var loadData = function () {
    $.getJSON("profiles2.json", function (data) {
        var html = [];
        html.push("<div id='click'>Click here</div>");
        $.each(data.profiles, function (firstIndex, firstLevel) {
            html.push("<h2>" + firstLevel.profileGroup + "</h2>");
        });
        $("#data").html(html.join(''));
    });
};
$(document).ready(function () {
    loadData();
    $("#click").click(function () {
        console.log('clicked');
    });
});

Answer 1

$.getJSON()（与其他Ajax方法一样）是异步，所以它会在结果返回之前立即返回。因此，您的loadData()方法也会立即返回，然后您尝试将处理程序绑定到尚未添加的元素。

在添加元素之后，将.click(...)绑定移动到$.getJSON()的回调中，它将起作用。

或者，使用委托事件处理程序：

$("#data").on("click", "#click", function() {
    console.log('clicked');
});

...实际上将处理程序绑定到当时存在的父元素。当发生单击时，它会测试它是否在与第二个参数中的选择器匹配的元素上。

除此之外，不要将点击处理程序绑定到div，除非您不关心身体上无法（或者只是选择不使用）鼠标或其他指针设备的人。使用锚元素（按照您认为合适的方式设置），以便通过键盘和鼠标“点击” -

Answer 2

$ .getJSON是一个异步调用，当你尝试绑定到它注入DOM的元素时，可能还没有完成。将元素追加到底部页面后，将绑定放在$ .getJSON调用中。

jQuery无法从getJSON中选择元素

2 个答案: