Javascript 更改附加按钮的属性

我有一个按钮，它是在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>

$（“.submitInput1”）。单击（函数（）{
event.preventDefault（）；
$（“.toBanList”）.html（“”）；
$.ajax({
键入：“获取”
url:“/searchFriendsToBlock”，
数据类型：“json”，
数据：{
},
成功：功能（msg）{
对于（var i=0；i我相信问题在于，注册处理程序时，click（）只对
DOM
中存在的元素有效。请尝试改用
on（）
：

在您的示例中：

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

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

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

请用这个

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

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


$（“.submitInput1”）。单击（函数（）{
event.preventDefault（）；
$（“.toBanList”）.html（“”）；
$.ajax({
键入：“获取”
url:“/searchFriendsToBlock”，
数据类型：“json”，
数据：{
},
成功：功能（msg）{
对于（var i=0；我尝试在for循环中添加
Block chat
。如果您可以使用
内联css
或
class
@RayonDabre编写，为什么要使用jQuery设置它，但我需要它们为蓝色，并在单击后更改。在这种情况下，当DOM中不存在元素时，您将绑定事件。请阅读关于事件的内容，或者只需在之后绑定事件r
append
operation..感谢您发布此问题的答案！堆栈溢出时不建议使用纯代码答案，因为原始海报（或未来读者）可能会遇到困难为了理解它们背后的逻辑。请编辑您的问题，并包括对您的代码的解释，以便其他人可以从您的答案中受益。谢谢！嘿@Danniel您尝试过我的代码了吗？它正在工作，因为我选择了blockButton1并在其上注册了单击事件。@Lalit Shingadiya编辑问题并在那里添加Commos，您做了什么以及我是如何做的这行不通。
<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>