jQueryクリックイベントを使用してボタンをクリックしたときにAJAXが2度目に呼び出されない

Question

ボタンクリックでAJAXコールがあります。最初にボタンをクリックするとフォームが送信されています。エラーがある場合、エラーメッセージを表示しています。

しかし、もう一度ボタンをクリックすると、AJAXは2度目に呼び出されていません。 AJAX呼び出しの代わりに警告メッセージを表示しようとすると、正常に動作しています。 ボタンクリックで2回目の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

私はこれについていくつかの考えを持っています。

あなたは#delボタンは常にDOMにありますか？または、それを削除してから、それをDOMに追加して、あなたが行うすべてのAjax呼び出しで追加しますか？

はいの場合、新しい#delボタンを作成したため、バインディングは機能しません。

だからではなく、しようと、

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

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

か、あなたはこれをしたくない場合は、あなたがボタンを作成DIV毎回のクリックをバインドする必要があります。