Question

我使用jquery添加一个具有自己唯一ID的元素，之后我想使用其id在该添加元素上点击一个click事件。

这是代码，由于某种原因它不起作用。

我是这个编程的新手，所以也许我没有看到明显的东西。

$(document).ready(function () {
        $("#type").click(function () {
            $(".footer").prepend('<div id="next">
                         <a id="next" href="#">
                         <img class="image" src="#" alt="next"></a></div>');
            $("#next").click(function () {
                $(".current")
                    .removeClass("current")
                    .addClass("done")
                    .next()
                    .removeClass("notdone")
                    .addClass("current");
            });
        });

Answer 1

USe event delegation，

$(document).on("click", "#next", function () {
    $(".current")
        .removeClass("current")
        .addClass("done")
        .next()
        .removeClass("notdone")
        .addClass("current");
});

这会将事件绑定到动态创建的元素。

Answer 2

在动态添加下一个元素时，您需要event delegation：

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

您也可以在next的每次点击前面添加具有相同ID type的元素。将class替换为next，并使用：

  $('.footer').on("click", ".next", function () { 
              $(".current")
              .removeClass("current")
              .addClass("done")
              .next()
              .removeClass("notdone")
              .addClass("current");
          });

Answer 3

尝试这样的事情

$("#type").click(function () {
    $(".footer").prepend('<div id="next"><a id="next" href="#"><img class="image" src="#" alt="next"></a></div>');
}); 
$(".footer").on('click','#next',function () {
    $(".current")
        .removeClass("current")
        .addClass("done")
        .next()
        .removeClass("notdone")
        .addClass("current");
});

在jquery-added元素上单击事件

3 个答案: