Question

我有一个按钮，是在ajax调用成功后由jquery创建的。我也希望通过jquery改变它的背景颜色，但它根本不起作用。有趣的是，我试图在html区域中添加完全相同的按钮，在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");
});

Answer 2

您需要使用事件委派，因为按钮是使用on方法动态创建的，如下所示：

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

Answer 3

请使用此

$("body").on('click', '.blockButton1', function(e) {

              $(this).css("background-color", "red");
});

Answer 4

<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>");
        }
       // Adding this line of code. 

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

       // End
      }

   });
});
</script>

您必须在ajax调用成功时添加已注释的代码块，否则它将无效。因为我使用它的语法只有在你的DOM中存在选择器时才有效。

更改附加按钮的attr

4 个答案: