0

我将 .each 方法与.getJSON在 JSON 文件中打印出对象的方法一起使用。这很好用，但是我无法向已打印出的元素添加点击功能。我正在尝试使用“点击”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');
    });
});
4

2 回答 2

2

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

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

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

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

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

顺便说一句，不要将点击处理程序绑定到 div，除非您不关心那些身体无法（或只是选择不）使用鼠标或其他指针设备的人。使用锚元素（您认为合适的样式），以便它们可以通过键盘和鼠标“单击”访问。

于 2013-05-09T23:12:42.497 回答
0

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

于 2013-05-09T23:16:32.230 回答