7

我有这个循环创建几个包含元素的 div。我希望能够将点击事件附加到具有“linky”类的每个链接，并且该链接将读取 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);
                    }

鉴于答案，我试图将事件附加到类链接，但我只是不确定在哪里，请参阅下面的更多详细信息，我的说明是从 ajax 提交（发布）的结果创建动态元素。

                    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);
                        }


 }
4

3 回答 3

15

使用 的委托形式on：

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

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

于 2012-09-29T23:28:58.187 回答
3

在这种情况下，您需要在创建元素后立即绑定事件。但是频繁的绑定和解除绑定是一种不好的模式。

因此，您应该委托该事件，即；将事件附加到这些控件的父容器，这些控件侦听其子级的事件并向其委托的子级提供事件。

尝试这个

$('body').on('click' , 'a.linky', function() {

      alert('Content id is : '+ $(this).attr('contentID'));
});
于 2012-09-29T23:33:59.200 回答
2

只需在附加事件处理程序后找到该元素：

$("#divContent").append(htmlCode)
    .find('.linky')
    .click(function(){
        //your click handler
    });
于 2012-09-29T23:48:14.630 回答