1

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

这是我的代码：

$.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 Frame 及其图像。我希望能够单击它们并提醒单击图像的索引。

但是在上面的代码中，当我点击任何图像时，它总是会提示 5，即i.

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

我该如何解决这个问题？

4

2 回答 2

1

那是因为当 click 事件触发时，for 循环已经完成并且 i 的值仍然是 5。我认为我不完全理解您在这里要做什么，但是您可以尝试将标题保存在元素中并在点击事件触发时重新加载它：

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'))});
}
于 2013-05-05T14:19:15.583 回答
1

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

此示例代码将为所有动态创建的 div 元素附加点击事件

$("body").on("click", "div", function(event){
  alert($(this).text());
});
于 2013-05-05T14:05:13.573 回答