ボタンのクリックイベントは、ページがリロードされたとき、または機能がアラートのときにのみ機能します。

Question

HTMLページにあるボタンの2つは、イベントの機能にalertがあるとき、または別のページその後、ホームページに戻ります。私が読んだ他の同様の問題から、ホームページはいくつかのタスクを完了しようとしているようで、アラートはそれをもっと時間をかけて購入しているようです。しかし、私の場合はそれが本当であるかどうかはわかりません。

私はソースとしてヘッダーのHTMLページによってロードされるJavaScriptファイルactions.jsを持っています。ファイルは、（のみ関連するコードを示す）、次のとおりです。

$(document).ready(function() { 
    //This function only works with an alert before the Ajax call or when page is reloaded 
    $("button[name='delete_deck']").click(function() { 
     var id = this.id; 

     $.ajax({ 
      url: "delete_decks.php", 
      type: "GET", 
      data: {selection:JSON.stringify(id)}, 
      async: false, 
      success: function(data) { 
       location.reload(); 
      } 
     }); 
    }); 

    //This function is for a button on the same page, but works fine without the alert or reloading the page 
    $("#study").click(function() { 
     var selection = getDeckSelections(); 

     if(selection.length > 0) { 
      //Get the selected side of the card 
      var selected_side = $('input[name=side_selection]:checked', '#side_selection_form').val(); 

      //Store the selected side in session storage 
      sessionStorage.setItem("selected_side", selected_side); 

      //Ajax call to get cards from database 
      $.ajax({ 
       url: "get_cards.php", 
       type: "GET", 
       data: {selection:JSON.stringify(selection)}, 
       cache: false, 
       async: false, 
       success: function(data) { 
        json = JSON.parse(data); 
        //Store the cards in session storage 
        sessionStorage.setItem("cards", JSON.stringify(json)); 
       } 
      }); 
     } 
    }); 
} 

Answer 1

$(document).on('click',"button[name='delete_deck']",function() { 
    var id = this.id; 

    $.ajax({ 
     url: "delete_decks.php", 
     type: "GET", 
     data: {selection:JSON.stringify(id)}, 
     async: false, 
     success: function(data) { 
      location.reload(); 
     } 
    }); 
});