javascript - jquery保存$(this)，然后重新运行(重写)它，它效果不好。

Question

代码:

<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上很好地绑定(bind)点击功能。

但是我不知道该怎么做。

我该怎么做？

更多说明:这段代码是从服务器获取ajax响应，而ajax响应需要一些时间，可能需要10~15秒。所以我想更改我的重新发送按钮以显示正在调用ajax，同时用户在等待服务器的ajax响应期间无法单击。

Answer 1

问题:

以下是您的代码中发生的情况，但并不是立即显而易见的。第一次单击时，您将创建一个包含单击的范围的 jQuery 对象，将其保存到一个变量中，然后在帖子完成后，将临时范围替换为变量的值。

看起来一切都应该没问题，但您实际上所做的是动态地将一个控件添加到您的 HTML 中，虽然该控件的 html 与原始范围相同，但它不是相同的控件。

为什么这很重要？

事件。这都是关于事件的。当您复制控件时，您并没有复制与其关联的那些事件监听器。因此，当该事件再次触发时，它会查找原始控件，但找不到。

您可以深入阅读有关事件和事件监听器的信息 here.

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

解决方案:

这里的答案是将这些事件绑定(bind)到比您要替换的控件更高的控件，并且本身不会被替换。所以也许是你的正文标签，甚至是文档标签。您的代码如下所示:

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

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

这可以确保当您替换控件时这些事件监听器不会被删除。

这是使用此方法的代码的模型:

$(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);
                    }
                }
            });
        })

<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>

希望有帮助!