Question

我在div中添加了一个后退按钮，但它似乎没有工作。可能出现什么问题？

 $(".blogposthr").append('<p style="font-size:10px; color:blue;margin-top:10px;padding-top:10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edit &nbsp;&nbsp;Delete&nbsp;&nbsp;<a href="#" id="back" style="text-decoration:none; color:blue;">Back</a></p><br>');

我添加了将其称为

的函数

$("#back").click(function () {
    alert("Back Clicked");
    $(".b5").hide(800, "swing");
    $(".b").show(800, "swing");

});

Answer 1

动态添加的项目不适用于事件绑定，因为在页面最初加载时执行一次事件绑定。改为使用：

$('.blogposthr').on('click', '#back', function() {
    alert("Back Clicked");
    $(".b5").hide(800, "swing");
    $(".b").show(800, "swing");
});

您的选择器（.blogposthr）需要是非动态添加的对象。

Answer 2

使用下面的代码。您还要检查Event delegation以将事件附加到动态创建的元素。事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

 $(document).ready(function(){

    $(document).on('click',"#back",function () {
       alert("Back Clicked");
       $(".b5").hide(800, "swing");
       $(".b").show(800, "swing");
    });

 });

动态附加时标记不工作

2 个答案: