Jquery与多个图像交互

时间:2013-12-12 13:13:03

标签: javascript jquery html

所以我正在使用自己的ID创建多个信息图片。

var inc = "";
for(int i = 0; i < itemList.length; i++)
{
    var inf = "info";
    var conc = inf.concat(i); //dinamically creating info0, info1, info2, info3.....                     

    inc += "<span id=" + '"' + conc + '"' + ">";
    inc += "<a class='infobutton' ";
    inc += ' href="Javascript: void(0)">';
    inc += '<img border="0" width="30" height="30" src="images/info.png"></a></span>';
}

因此,每个图像都会有一个名为info0,info1等的id。 我想使用jquery为每个图像创建单独的对话框,我正在使用它。

$(function ()
{
    for(var i = 0; i < itemList.length; i++)
    {
        $("#info" + i).on("click", function ()
        {
            $("#dialog").dialog("open");
        });
    }

    $("#dialog").dialog(
    {
        autoOpen: false
    });
    $("#dialog").dialog(
    {
        modal: true,
        resizable: false,
        buttons:
        {
            "Close": function ()
            {
                $(this).dialog("close");
            }
        }
    });
});

毋庸置疑,它不起作用,我也没有线索,也许我正在尝试使用某些东西而不是jquery的工作方式。感谢。

2 个答案:

答案 0 :(得分:0)

使用http://api.jquery.com/delegate/进行活动。您动态插入DOM以便它们不会对插入的元素起作用。

$('body').delegate($("#info"+i), 'click', function(){
    $("#dialog").dialog("open");
});

最好使用类似.open_dialog的类并创建一次事件,而不是在每次迭代中将循环附加到单个元素。

答案 1 :(得分:0)

我相信:

for(var i = 0; i>itemList.length; i++)
{
    $("#info" + i).on("click", function ()
    {
        $("#dialog").dialog("open");
    });
}

可以这样做(将图像输入div):

$("div").on("click", "img", function{});