爲什麼這個Ajax帖子被調用兩次？

Question

檢查其他SO帖子後，我沒有找到我的問題的答案 - 但顯然這種類型的問題發生在別人身上，只是不完全是我的問題。但是一個ajax .post函數被調用了兩次，儘管我不明白爲什麼。

這是jQuery 1.8.0，使用Firefox（Iceweasel）瀏覽器。

這裏是我的jQuery代碼，將功能附加到四個按鈕，編輯，保存，新建，取消。還有用於填充選擇列表的功能：

var is_new = 0; 

    $(document).ready(function() 
    { 
    // Attach event handlers to buttons 
    $('#editbtn').on('click',pop_studyname); 
    $('#newbtn').on('click',new_studyname); 
    $('#savebtn').on('click',save_studyname); 
    // disable the Save button until we have something to save 
    $('#savebtn').attr('disabled',true); 
    // disable the Cancel button until we have something to cancel 
    $('#cancelbtn').attr('disabled',true); 

    }); 

    function pop_studyname() 
    { 
    // pop the selected studyname into edit box. 
    $('#edit_field').val($('#studylist :selected').text()); 
    // disable the New Study button 
    $('#newbtn').attr('disabled',true); 
    // enable the Cancel button 
    $('#cancelbtn').attr('disabled',false); 
    // and bind it to a function 
    $('#cancelbtn').on('click',cancel_studyname);  
    // enable the Save button 
    $('#savebtn').attr('disabled',false); 
    // and bind it to a function 
    $('#savebtn').on('click',save_studyname); 
    } 

    function new_studyname() 
    { 
    // clear edit box. 
    $('#edit_field').val(''); 
    /**************************/ 
    /* set flag for New Study */ 
    is_new = 1; 
    /**************************/ 

    // Enable the Cancel button 
    $('#cancelbtn').attr('disabled',false); 
    // and bind it to a function. 
    $('#cancelbtn').on('click',cancel_studyname); 
    // Disable the Edit button. 
    $('#editbtn').attr('disabled',true); 
    // Enable the Save button 
    $('#savebtn').attr('disabled',false); 
    // and bind it to a function. 
    $('#savebtn').on('click',save_studyname); 
    // put the cursor in the edit box 
    $('#edit_field').focus(); 
    } 

    function cancel_studyname() 
    { 
    // clear edit box. 
    $('#edit_field').val(''); 
    // disable cancel button. 
    $('#cancelbtn').attr('disabled',true); 
    // disable Save button. 
    $('#savebtn').attr('disabled',true); 
    // Enable the Edit button. 
    $('#editbtn').attr('disabled',false); 
    // And the New Study button. 
    $('#newbtn').attr('disabled',false); 
    // Reset new study trigger variable. 
    is_new = 0; 
    } 

    function save_studyname() 
    { 
    // Are we saving a new or existing Study? 
    if (is_new == 1) { 
     $.post("saveStudyName.php", 
     {'type': 'new', 'studyname': $('#edit_field').val()}, 
      function(resultmsg) { 
       alert(resultmsg); 
      } 
     ); 
    // reset the trigger flag 
    is_new = 0; 

    } else { 
     // Update an existing Study. 
     // Get the record index and edited study name. 
     var styndx = $('#studylist option:selected').val(); 
     var studyname = $('#edit_field').val(); 

    // Use ajax post call to update database. 
     $.post("saveStudyName.php", 
     {'type': 'update', 'studyname':studyname, 'styndx':styndx}, 
     function(resultmsg) { 
       alert(resultmsg); 
     }); 
    } 
    // clear the edit field 
    $('#edit_field').val(''); 
    // disable the Save button 
    $('#savebtn').attr('disabled',true); 
    // Enable the Edit button. 
    $('#editbtn').attr('disabled',false); 
    // Enable the New Study button. 
    $('#newbtn').attr('disabled',false); 
    // Finally, refresh the studyname picklist. 
    refresh_studynames(); 
    } 

    function refresh_studynames() 
    { 
    // repopulate studylist with update from database... 
    // - form the query. 
    // - send to database, get the result. 
    // - use the result to repopulate the Study name select list. 
    $.ajax({          
     url: 'getStudyNames.php',  //the script to call to get data   
     data: "",      //you can insert url argumnets here to pass to api.php 
             //for example "id=5&parent=6" 
     dataType: 'json',    //data format 
     error: function() { 
     alert('Refresh of study names failed.'); 
     }, 
     success: function(data) 
     { 
    var $studylist = $('#studylist').empty(); 
    $.each(data, function(i, record) { 
     $studylist.append($("<option/>", { 
     value: record.studyindex, 
     text: record.studyname 
     })); 
    }); 
     } 
    }); 
    } 

縱觀Web控制檯和調試器，我可以看到，兩個職位（以saveStudyName.php）和兩個GET的（從getStudyNames.php）正在發生，只需要幾個毫秒的時間。第一個電話是正確的;但第二個不應該發生。由於涉及邏輯，第二次調用中的參數不正確，並且失敗。

爲了完整起見，這裏是HTML代碼：

<body > 
<div id="container"> 
    <div id="header"> 
    <h1>Admin Module</h1> 
    </div> 
    <div id="navigation"> 
    <ul> 
    <li><a href="AdminMenu.php">Admin Menu</a></li> 
    <li><a href="../DNAPortal/DNA_Portal_Menu.php">DNA Portal</a></li> 
    <li><a href='../DNAPortal/logout.php'>Logout</a></li>> 
    </ul> 
    </div> 
    <div id="content"> 
    <h2>IBG Study Maintenance</h2> 
    <p> 
    <form name="StudySelection" action="process_StudyMaint.php" method="POST" onsubmit="return false" > 
    <input type=hidden name=studyindex> 
    <div id=content-container2> 
     <fieldset> 
     <LEGEND><b>Select Study &/or action</b></LEGEND> 
    <p> 
    <P CLASS=select_header>List of Studies<br> 
    <SELECT multiple size=15 NAME="studylist" ID="studylist" STYLE="width: 150px"> 
    <?php 
     $i=0; 
     while ($i < $numstudies) { 
      $styarr = pg_fetch_row($studyresult); 
      echo "<option value=$styarr[0]>$styarr[1]\n"; 
      $i++;   
     } 
     ?> 
    </select> 
    </p>     
     </fieldset> 
    </div> 
    <div > 

    </div> 
    <div class="lower_block"> 
     Study name:<br> 
     <input id="edit_field" type="text" size=30> 
     <input type="button" name="editbtn" id="editbtn" value="Edit" sclass="btn"> 
     <input type="button" name="savebtn" id="savebtn" value="Save" sclass="btn"> 
     <input type="button" name="newbtn" id="newbtn" value="New Study" sclass="btn"> 
     <input type="button" name="cancelbtn" id="cancelbtn" value="Cancel" sclass="btn" disabled=TRUE > 
    </div> 
    </div> 
</div> 
</form> 
</body> 

是有一些方法來阻止發生的第二個電話？我看不出爲什麼會發生這種情況。

任何幫助非常感謝！太有趣了！

--rixter

Answer 1

如果您正在打保存，然後它被稱爲兩次，因爲你告訴它，之前編輯或新建。

當頁面加載你撥打：$('#savebtn').on('click',save_studyname);

而且回調函數的Edit和New按鈕pop_studyname()和new_studyname()包含在同一行。

如果您爲同一個事件執行多個.on()，您將獲得多個呼叫。你需要確保它只被調用一次。

Answer 2

請試試這個，它的工作對我來說...

$(this).unbind();