两个jQuery指令在Firefox中工作，而不是在Chrome中

Question

我想通过点击一个按钮来调用一个循环内的ajax。 请在下面找到我的代码。代码工作在Mozilla Firefox没有任何问题。但在Google Chrome步骤1和步骤2，没有得到执行，它直接进入每个方法。 我的代码：

$('#button_id').click(function() { 
 
     $(this).prop("disabled", true); /*Step 1*/ 
 
     $(this).html('<li class="fa fa-refresh fa-spin"></li>&nbsp;&nbsp;Please wait..'); /*Step 2*/ 
 
     $.each(MyData, function (i, value) { 
 
      $.ajax({ 
 
       url: "myurl", 
 
       type: "POST", 
 
       dataType: "json", 
 
       async: false, 
 
       success: function (result) { 
 
        alert("success"); 
 
       }, 
 
       error: function (xhr, status, error) { 
 
        alert("Error"); 
 
       } 
 
      }); 
 
     }); 
 
     $(this).html('<li class="fa fa-Send"></li>&nbsp;&nbsp;Submit'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="button_id" class="btn btn-lg btn-success warning_1 btn-block" style="border-radius: 3px;"><li class="fa fa-send" ></li>&nbsp;&nbsp;Submit</button>

Answer 1

您需要使用$(this)而不是$('this')。单引号应删除：

$('#button_id').click(function() { 
 
    /*Step 1*/ 
 
    $(this).prop("disabled", true); 
 
    /*Step 2*/ 
 
    $(this).html('<li class="fa fa-refresh fa-spin"></li>&nbsp;&nbsp;Please wait..'); 
 
    $.each(MyData, function(i, value) { 
 
    $.ajax({ 
 
     url: "myurl", 
 
     type: "POST", 
 
     dataType: "json", 
 
     async: false, 
 
     success: function(result) { 
 
     alert("success"); 
 
     }, 
 
     error: function(xhr, status, error) { 
 
     alert("Error"); 
 
     } 
 
    }); 
 
    }); 
 

 
    $(this).html('<li class="fa fa-Send"></li>&nbsp;&nbsp;Submit'); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button_id">Button</button>