javascript - 更改附加按钮的属性

Question

我有一个按钮，它是在 ajax 调用成功后由 jquery 创建的。我也想通过 jquery 更改它的背景颜色，但它根本不起作用。有趣的是，我尝试在脚本之外的 html 区域中添加完全相同的按钮，但效果很好。如何处理？

<script>
$(".submitInput1").click(function() {

    event.preventDefault();
    $(".toBanList").html("");

    $.ajax({
        type: "GET"
        url: "/searchFriendsToBlock",
        dataType: "json",
        data: {

        },
        success: function(msg) {
            for (var i = 0; i <= msg.length; i++) {
                $(".banSearchResultList").append("<li class='toBanList'><img class='avatarImage' src='" + msg[i]['avatar'] + "'>" + msg[i]['login'] + "<br>" + msg[i]['first_name'] + " " + msg[i]['last_name'] +
                    "<button class='blockButton2' style='background-color:blue'>Block user</button>\n\
                       <button class='blockButton1' style='background-color:blue'>Block chat</button></li>");
            }
        }

    });

});
</script>


<script>
$(".blockButton1").click(function() {
    $(".blockButton1").css("background-color", "red");
    $(".blockButton1").attr("background-color", "red");

})
</script>

Answer 1

我认为问题在于，当您注册处理程序时，click() 仅适用于 DOM 中存在的元素。尝试使用 on() 代替:http://api.jquery.com/on/

在你的例子中:

$(".banSearchResultList").on('click','.blockButton1',function() {
    $(this).css("background-color", "red");
});