Question

I have this simple edit form that allows me to change the text attribute of a set of database records displayed in a select list; however, the function only works once. The first edit and save will successfully change a record; but the second time an edit is done, the change is not saved. The edit and save events are attached to buttons using bind(). (I’m pretty new to jQuery, so not too aware of its subtleties yet.)

It seems like the disabling of a button seems to unbind the function attached to the button; but I haven’t been able to decipher that from the jQuery documentation.

Here is the jQuery code:

 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
        }));
    }); 


      } 
    });
  }

And here is the HTML code it references:

<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>

Any help much appreciated!

Answer 1

As @DavidStetler noticed the event binding gets lost when you update elements with bindings. Using on instead of bind will most probably solve your problem.

Example to bind on a click event:

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

Another problem is when you update #someId, the binding gets lost. The solution is to bind on a wrapper (that isn’t updated):

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