Question

我正在尝试为从JSON动态创建的每个元素添加一个click事件处理程序。

这是我的代码：

$.getJSON('slides.json', function (data) {
    for (var i = 0; i < data.length; i++) {
        var s = sym.getSymbol("Base").createChildSymbol("Frame", "Slider");
        s.$("Frame").css({
            "background-image": "url('" + data[i].image + "')"
        });
        s.$("Frame").click("click", function (e) {
            alert(data[i].title)
        });
        s.getSymbolElement().css({
            "position": "absolute",
            "right": i * 81 + 5 + "px"
        });
        sym.getSymbol("Base").$("Slider").css({
            "width": i * 81 + 5 + "px"
        });
    } //for
});

此代码将从JSON文件动态创建5帧及其图像。我希望能够点击它们并提醒所点击图像的索引。

但是在上面的代码中，当我点击任何图片时，它总是提醒5，即只是i的最后一个值。

我还尝试将i替换为data[i].title，但没有任何反应，无法访问可以从中读取信息的JSON文件。

我该如何解决这个问题？

Answer 1

您可以使用jQuery .on api为动态内容附加事件。

此示例代码将为所有动态创建的div元素启用click事件

$("body").on("click", "div", function(event){
  alert($(this).text());
});

Answer 2

那是因为当click事件触发时，for循环已经完成，i的值仍为5.我不认为我完全理解你在这里尝试做什么，但你可能会尝试保存标题在元素中并在click事件触发时重新加载：

for ( var i=0; i < data.length; i++ ) {
    var s = sym.getSymbol("Base").createChildSymbol("Frame", "Slider");
    s.$("Frame").css({"background-image":"url('"+data[i].image+"')"});
    s.$("Frame").data('title', data[i].title);
    s.$("Frame").click("click", function(e){ alert($(this).data('title'))});
}

如何将Click函数添加到Json创建的动态项目中？

2 个答案: