這個jquery綁定事件怎麼才起作用？

Question

我有這個簡單的編輯表單，它允許我更改顯示在選擇列表中的一組數據庫記錄的文本屬性;但是，該功能只能使用一次。第一次編輯和保存將成功更改記錄;但第二次編輯完成後，更改不會保存。使用bind（）將編輯和保存事件附加到按鈕上。 （我對jQuery相當陌生，所以不太瞭解它的細微之處。）

看起來像禁用按鈕似乎取消綁定按鈕的功能;但我一直無法從jQuery文檔中解讀這些信息。

這裏是jQuery代碼：

var is_new = 0; 

    $(document).ready(function() 
    { 
    //refresh_studynames(); ...if we get this working, use? 
    $('#editbtn').bind('click',pop_studyname); 
    $('#newbtn').bind('click',new_studyname); 
    $('#savebtn').bind('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').bind('click',cancel_studyname);  
    // enable the Save button 
    $('#savebtn').attr('disabled',false); 
    // and bind it to a function 
    $('#savebtn').bind('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').bind('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').bind('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); 

    } 

    function save_studyname() 
    { 

    // Are we saving a new or existing Study? 
    if (is_new == 1) { 
     $.ajax({ 
      type: 'POST', 
      URL: "saveStudyName.php", 
      data: {'type': 'new', 'studyname': $('#edit_field').val()}, 
      success: function(resultmsg) { 
      console.log(resultmsg); 
       alert(resultmsg); 
      }, 
      error: function() { 
      console.log(resultmsg); 
       alert('We have a problem, Huston...'); 
      } 
     }); 
    // 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(); 

     //alert('option selected:'+$('#edit_field').val()+'option value:'+styndx); 

     $.post("saveStudyName.php", {'type': 'update', 'studyname':studyname, 'styndx':styndx}, 
     function(resultmsg) { 
     // clear the edit field 
     $('#edit_field').val(''); 
     // disable the Save button 
     $('#savebtn').attr('disabled',true); 
     // notify user 
     //alert(resultmsg); 
     });  

    } 
    // refresh the picklist 
    refresh_studynames(); 
    // Enable the Edit button. 
    $('#editbtn').attr('disabled',false); 


    } 

    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)   //on recieve of reply 
     { 

    var $studylist = $('#studylist').empty(); 
    $.each(data, function(i, record) { 
     $studylist.append($("<option/>", { 
     value: record.studyindex, 
     text: record.studyname 
     })); 
    }); 


     } 
    }); 
    } 

這裏是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> 

任何幫助，非常感謝！

Answer 1

由於@DavidStetler注意到當您使用綁定更新元素時​​事件綁定會丟失。使用on而不是bind將最有可能解決您的問題。

實例綁定上的click事件：

$("#someId").on("click", function() { alert('someId is clicked') }); 

的另一個問題是，當你更新#someId，結合丟失。解決方案是綁定在一個包裝器上（未更新）：

$("#wrapperDiv").on("click", "#someId", function(){ alert('someId is clicked') });