Question

CODE：

<a href="#"><span class="clickable" id="span_resend">Resend</span></a>

<script>
$('#span_resend').click(function (e) {
            e.preventDefault();
            var save_this = $(this);
            var middle_this = $('<span class="loader">now_loading</span>');
            $(this).replaceWith(middle_this)
            $.ajax({
                url:'/ajax/',
                type:'post',
                dataType:'json',
                cache:false,
                data:{
                    com: 'some',
                },
                success:function (data) {
                    console.log(data)
                    if (data.res === 'success'){
                        middle_this.replaceWith(save_this)
                    }
                }
            });
        })
</script>

首次点击重新发送时效果很好。

然而，脚本标记的原因是，now_loading的术语将被加载，然后点击#span_resend不能正常运行。

我认为这是因为我没有在#span_resend上很好地绑定点击功能。

但我不知道该怎么做。

我该怎么做？

更多解释：此代码用于从服务器获取ajax响应，并且ajax响应需要一些时间，可能需要10~15秒。所以我想更改我的重发按钮以显示正在调用ajax，同时用户在等待服务器的ajax响应期间无法单击。

Answer 1

我建议不要用现在加载替换按钮，但要隐藏它并显示单独的加载指示器，然后在完成后恢复

$(document).ready(function() {
  $("#saveBtn").click(saveData);
});

function saveData() {
  $('#saveBtn').hide();
  $('#nowLoadingInd').show();
  //AJAX here instead of timeout (just for demo purpose)
  window.setTimeout(function() {
    $('#saveBtn').show();
    $('#nowLoadingInd').hide();
  }, 10000);
}

#saveBtn {
  display:inline-block;
  background:green;
  color:white;
  border-radius:10px;
  cursor:pointer;
  padding:3px 5px
}
#nowLoadingInd {
  color:gray
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="saveBtn">Save!</div>
    <div id="nowLoadingInd" style="display:none">Now Loading...</div>
  </body>
</html>

或者，你可以将一个元素传递给你的ajax选项，然后使用这个对象在then回调中引用它：

$.ajax({
    url:"yourUrl",
    data:{your:"data"},
    extraProperty:$('#yourElem')
}).then(function() {
    this.extraProperty.show()
});

Answer 2

问题：

您的代码中发生的事情并不是很明显。在第一次单击时，您创建一个包含所单击的跨度的jQuery对象，将其保存到变量中，并在您的帖子完成后，然后使用变量的值替换临时跨度。

似乎一切都应该没问题，但你实际做的是动态地为你的HTML添加一个控件，而控件的html与原始的span相同，它是不是相同的控制。

为什么这很重要？

事件。这完全是关于事件的。复制控件时，您也不会复制与其关联的事件侦听器。因此，当该事件再次触发时，它会查找原始控件并且找不到它。

您可以深入了解事件和事件监听器here.

太棒了，你对这一切做了什么？

解决方案：

这里的答案是将这些事件绑定到一个控件，该控件高于您要替换的控件并且不会被替换。也许你的身体标签，甚至是文件标签。以下是您的代码中的内容：

// Instead of this:
$('#span_resend').click(function (e) {
    // Some code.
});

// Do this:
$(document).on('click', '#span_resend', function (e) {
    // Some code.
});

这可确保在替换控件时不会删除这些事件侦听器。

以下是使用此方法模拟您的代码：

＆＃13;

$(document).on('click', '#span_resend', function (e) {
            e.preventDefault();
            var save_this = $(this);
            var middle_this = $('<span class="loader">now_loading</span>');
            $(this).replaceWith(middle_this)
            $.ajax({
                url:'https://reqres.in/api/users?delay=3',
                type:'post',
                dataType:'json',
                cache:false,
                data:{
                    com: 'some',
                    res: 'success'
                },
                success:function (data) {
                    if (data.res === 'success'){
                        middle_this.replaceWith(save_this);
                    }
                }
            });
        })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><span class="clickable" id="span_resend">Resend</span></a>

＆＃13;

希望有所帮助！

jquery保存$（this），并重新运行（重写）它，它不能正常工作。

2 个答案: