javascript - 两个 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>