使用jQuery click事件未在按钮单击上第二次调用AJAX

Question

单击按钮时，我有一个AJAX呼叫。 当我第一次单击按钮时，正在提交表单。 如果出现错误，我正在显示错误消息。

但是当我再次单击该按钮时，AJAX没有被第二次调用。 如果我尝试使用警报消息而不是AJAX呼叫，则它工作正常。 如何在按钮单击后第二次发出AJAX请求？

这是我的代码：

        <script type="text/javascript">

        $(document).ready(function() {


          $("#del").on('click',function()
           {
             $.ajax({
                type: 'DELETE',
                url: window.location.href,
                success: function(data) {
                  var error = data.error;
                  var success = data.success;
                  if(error.length>0)
                  {
                      $("#errmsg").attr('class', 'alert alert-danger alert-dismissible');
                      $('#str').text(error);
                      $('#errmsg').show();
                  }
                  else
                  {
                    $("#errmsg").attr('class', 'alert alert-success alert-dismissible');
                    $('#str').text(success);
                    $('#errmsg').show();
                      setTimeout(function(){
                        window.location.href= "/users";
                      }, 2000);
                  }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    alert(textStatus+errorThrown);
                }
            });

          });



        });

        </script>

Answer 1

关键在于脚本的成功处理程序。 如果没有发生错误，您将在2秒后将页面的位置更改（即重定向）到/ users URL。

我还假设将事件附加到按钮的此特定脚本未包含在/ users页面中，这将导致单击按钮时事件处理程序不再被触发。

因此，我建议您将这段代码放在脚本文件中，并在要加载的两个页面中引用它。

Answer 2

我对此有几点想法。

DOM中是否总是有#del按钮？ 还是您将其删除，然后在您进行的每个ajax调用中将其附加到DOM？

如果是，则绑定将不起作用，因为您刚刚创建了一个新的#del按钮。

所以尝试

<div id="del" onclick="del_me()">Delete</div>

<script>
del_me = function(){
 //---- YOUR AJAX CALL HERE
}
</script>

或者，如果您不希望这样做，则每次创建按钮时，都必须将点击绑定到div。