PHPサーバーからのAJAX GETは、2回目の呼び出し後にのみ動作します

Question

まずは、jQueryの経験を積んだPHPを学び始めました。第二に、私は数日間この問題を解決しようとしました。私には十字架にしてはいけません。

PHPサーバーへのjQuery AJAX呼び出しを使用してデータベースからデータを取得する必要があります。それはうまくいきますが、問題は、2回目の呼び出し（クリック）後に問題が発生することです。

フォームはボディに非同期にロードされ、リンクをたどるとURLは.../index.php＃tr_domになります。私が最初にボタンをクリックすると、URLは.../index.php＃tr_domから.../index.php？order = ASC＃tr_domになり、ページは空になります。 URLは同じです。その後、私はその特定のリンクに再び行きます。フォームは再びロードされ、問題の関数を呼び出すボタンをクリックすると、今度はロードされます。これは期待通りに機能します。

誰かがこの問題を明確にすることができますか？以下の関連コード。

PHP DBBrocker：

function prikaziTroskoveDomacinstva($username, $sort_val, $sort_order) { 
      $query = "SELECT * FROM (trosak t INNER JOIN trosak_domacinstva td "; 
      $query .= "ON t.trosak_id = td.trosak_id) INNER JOIN datum d "; 
      $query .= "ON t.datum_id = d.datum_id INNER JOIN vrsta v "; 
      $query .= "ON v.vrsta_id = td.vrsta_id "; 
      $query .= "WHERE username = '".$username."'"; 

      if (isset($sort_val)) { 
       $query .= " ORDER BY ".$sort_val; 
      } 

      if (isset($sort_order)) { 
       $query .= " ".$sort_order; 
      } 

      $result = $this->mysqli->query($query); 

      $this->chckResult($result); //not relevant in this context 

      while($row = $result->fetch_assoc()) { 
       echo ("<br>".$row['iznos']. 
        "<br>".$row['opis']. 
        "<br>".$row['datum']. 
        "<br>".$row['naziv']); 
      } 
     } 

PHPコントローラ：

include_once("DBBroker.php"); 
$dbb = new DBBroker(); 

if (isset($_GET["function"]) && !empty($_GET["function"]) && $_GET["function"] == "tr-dom-select") { 
     $dbb->prikaziTroskoveDomacinstva("Nikolic", $_GET["sort_val"], $_GET["sort_order"]); 
    } 

$dbb->closeConnection(); 

jQueryの機能：

var loadForm = function (hRef) { //loads the form on click of the <a> 
     document.location.hash = hRef; 
     $("#main").empty().load("../includes/layout/"+hRef+".php"); 
} 

var selectTrDom = function(responseFn) { //gets data from server 
    var sortVal = $("#tr-frm select").val(); 
    var sortOrder = $('#tr-frm input[name="order"]:checked').val(); 

    $.ajax({ 
     type : 'GET', 
     url: '../includes/layout/main.php', 
     dataType : 'text', 
     data : { 
      'function' : 'tr-dom-select', 
      'sort_val' : sortVal, 
      'sort_order' : sortOrder 
     }, 
     success : function(data) { 
      responseFn(data); 
     } 
    }); 
} 

var responseCallback = function(data) { //displays data on ajax success 
    $("#message-box").html(data); 
} 

そして$(document).ready(...)

//load the right form on click, pass correct hRef 

$(document).on('click', '#tr-frm #btn-sort', function(evt) { 
    selectTrDom(responseCallback); 
}); 

Answer 1

に

$('#tr-frm #btn-sort').click(function(event) { 
    selectTrDom(responseCallback); 
}); 

これを試してみてください