如何使用从from.Append函数创建的动态元素中使用JQuery选择器?

问题描述:

我有这个循环,在其中创建带有元素的多个div.我希望能够将单击事件附加到具有"linky"类的每个链接上,并且该链接将读取contentID属性.

I have this loop creating several divs with elements in it. I want to be able to attach a click event to every link with the "linky" class, and this link would read the contentID attribute.

我一直在搜索,找到要在动态创建的元素中使用选择器的案例,但不适用于我的案例.有提示吗?

I've searching forever, find cases to use selectors in dynamic created elements but just can't apply to my case. Any tips?

                    for (i = 0; i < msg.length; i++) {
                        var htmlCode = "<a href='/Controller/Details/" + msg[i].ID + "' style = 'float: left;'><img class='packageImage' border='0' src='" + msg[i].Size0Path + "' /></a>";
                        htmlCode += "<span style='float: left;margin: 5px 0px 0px 10px;'>" + "<b>" + msg[i].TheName + "</b><br>";


                        if (msg[i].IsPaused == true) {

                            htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>";
                        } else {

                            htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>";
                        }
                        htmlCode += "</span>";
                        htmlCode += "<div class='clear'></div>";
                        $("#divContent").append(htmlCode);
                    }

给出答案,我试图将事件附加到class linky上,但是我不确定在哪里,请参阅下面的更多详细信息,我的说明是根据ajax Submit(post)的结果创建动态Elements的.

Given the answers, I'm trying to attach the event to class linky, but I just not sure where, see more details below, my instructions are creating the dynamic Elements from the result of ajax submit(post).

                    success: function (msg) {

                        $("body").on("click", "a.linky", function () {
                            alert($(this).attr("contentID"));
                        });



 for (i = 0; i < msg.length; i++) {
                            var htmlCode = "<a href='/Controller/Details/" + msg[i].ID + "' style = 'float: left;'><img class='packageImage' border='0' src='" + msg[i].Size0Path + "' /></a>";
                            htmlCode += "<span style='float: left;margin: 5px 0px 0px 10px;'>" + "<b>" + msg[i].TheName + "</b><br>";


                            if (msg[i].IsPaused == true) {

                                htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>";
                            } else {

                                htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>";
                            }
                            htmlCode += "</span>";
                            htmlCode += "<div class='clear'></div>";
                            $("#divContent").append(htmlCode);
                        }


 }

使用 on :

$("body").on("click", "a.linky", function() {
    alert($(this).attr("contentID"));
});

在创建任何动态内容之前,您只需要执行一次.它将在<body>上附加一个事件处理程序,该事件处理程序将响应其满足a.linky选择器被单击的任何后代.在您附加处理程序时,这些元素是否已经在DOM中或以后是否添加它们都没有关系.

You only need to do this once, before creating any dynamic content. It will attach an event handler to <body> that will respond to any of its descendants that satisfy the a.linky selector being clicked. It does not matter if these elements are already in the DOM at the moment you attach the handler or if they get added later.