模态中的jquery函数仅在第一次打开时起作用，在关闭并重新打开之后它们会停止工作

Question

I am using jquery modal, within each modal I have a form. I am then loading certain jquery functions onto the form elements, for example jquery autocomplete.

When I open the modal for the first time it is working fine with all the jquery functions within the script, but as soon as I close the first modal and open again none of the functions work.

Its as though they are binded on the page load to the form, then when the button is clicked for the modal its works and then closing the modal unbinds it.

Does anybody have any ideas as to why they would stop working after the first modal open/close?

$(document).ready(dialogForms);
function dialogForms() {    
 $('a.menubutton').click(function() {
    var a = $(this);
    $.get(a.attr('href'),function(resp){
      var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
      $('body').append(dialog);
      dialog.find(':submit').hide();
      dialog.dialog({
        title: a.attr('title') ? a.attr('title') : '',
        modal: true,
        buttons: {
          'Save': function() {

                if($(this).find('form').valid()){
                // do stuff if form validates
                submitFormWithAjax($(this).find('form'));               
                $('#homepage').trigger('click');    
                $(this).dialog('close');
                } 
                else {

                }             
                },
          'Cancel': function() {$(this).dialog('close');}
        },
        width: 650,
        height: 400,        
        show: "fade",
        hide: "fade"
      });

$('#edit_vle').bind('change', function (e) { 
    if( $('#edit_vle').val() == 'FE') {
      $('#fe_automcomplete1').show();
      $('#he_automcomplete1').hide();
      $("#edit_he_title").val("");
      $("#edit_he_code").val("");
    }
    else{
      $('#fe_automcomplete1').hide();
      $('#he_automcomplete1').show();
      $("#edit_fe_title").val("");
      $("#edit_fe_code").val("");
    }         
});


$('#delete_vle').bind('change', function (e) { 
    if( $('#delete_vle').val() == 'FE') {
      $('#fe_automcomplete2').show();
      $('#he_automcomplete2').hide();
      $("#delete_he_title").val("");
      $("#delete_he_code").val("");
    }
    else{
      $('#fe_automcomplete2').hide();
      $('#he_automcomplete2').show();
      $("#delete_fe_title").val("");
      $("#delete_fe_code").val("");
    }         
});


    var epronames = [<?php 
    $eprotmp = Array();
    while($eprorow = mssql_fetch_array($epro_course)) $eprotmp[] = 
    '{
                title: "'.$eprorow['Name'].'",
                label: "'.$eprorow['Code'].' - '.$eprorow['Name'].'",
                code: "'.$eprorow['Code'].'",
                user: "'.$eprorow['fname'].' '.$eprorow['sname'].'",
    }'; 
    echo join(',', $eprotmp);
?>];

    var fenames = [<?php 
    $fetmp = Array();
    while($ferow = mysql_fetch_array($feinactive)) $fetmp[] = 
    '{
                title: "'.$ferow['course'].'",
                label: "'.$ferow['shortname'].' - '.$ferow['course'].'",
                code: "'.$ferow['shortname'].'",
    }'; 
    echo join(',', $fetmp);
?>];

    var henames = [<?php 
    $hetmp = Array();
    while($herow = mysql_fetch_array($heinactive)) $hetmp[] = 
    '{
                title: "'.$herow['course'].'",
                label: "'.$herow['shortname'].' - '.$herow['course'].'",
                code: "'.$herow['shortname'].'",
    }'; 
    echo join(',', $hetmp);
?>];

        $("#title").autocomplete({
            minLength: 3,
            source: epronames,
            focus: function( event, ui ) {
                $("#title").val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $("#title").val( ui.item.title );
                $("#code").val( ui.item.code );
                $("#ctl").val( ui.item.user );
                return false;
            },
            change: function(event, ui) {
            if (!ui.item) {
                $("#title").val("");
            }
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "</a>" )
                .appendTo( ul );
        };



        $("#edit_he_title").autocomplete({
            minLength: 3,
            source: henames,
            focus: function( event, ui ) {
                $("#edit_he_title").val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $("#edit_he_title").val( ui.item.title );
                $("#edit_he_code").val( ui.item.code );
                return false;
            },
            change: function(event, ui) {
            if (!ui.item) {
                $("#edit_he_title").val("");
            }
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "</a>" )
                .appendTo( ul );
        };



        $("#edit_fe_title").autocomplete({
            minLength: 3,
            source: fenames,
            focus: function( event, ui ) {
                $("#edit_fe_title").val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $("#edit_fe_title").val( ui.item.title );
                $("#edit_fe_code").val( ui.item.code );
                return false;
            },
            change: function(event, ui) {
            if (!ui.item) {
                $("#edit_fe_title").val("");
            }
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "</a>" )
                .appendTo( ul );
        };      






if($("#clearform").length > 0){
$("#clearform").click(function() {
    $("#title").val('');
    $("#code").val('');
    $("#ctl").val('');
});
}

if($("#delete_fe_clearform").length > 0){
$("#delete_fe_clearform").click(function() {
    $("#delete_fe_title").val('');
    $("#delete_fe_code").val('');
});
}
if($("#edit_fe_clearform").length > 0){
$("#edit_fe_clearform").click(function() {
    $("#edit_fe_title").val('');
    $("#edit_fe_code").val('');
});
}

if($("#delete_he_clearform").length > 0){
$("#delete_he_clearform").click(function() {
    $("#delete_he_title").val('');
    $("#delete_he_code").val('');
});
}
if($("#edit_he_clearform").length > 0){
$("#edit_he_clearform").click(function() {
    $("#edit_he_title").val('');
    $("#edit_he_code").val('');
});
}


}, 'html');
return false;
});

}

function submitFormWithAjax(form) {
  form = $(form);
  $.ajax({
    url: form.attr('action'),
    data: form.serialize(),
    type: (form.attr('method')),
    dataType: 'script',
    success: function(data){
   }
  });
  return false;
}

Here are the buttons for each modal.

<a href="new_course.php" class="menubutton" id="new_course" title="New Course">New Course</a>
<a href="edit_course.php" class="menubutton" id="edit_course" title="Edit Course">Edit Course</a>
<a href="delete_course.php" class="menubutton" id="delete_course" title="Delete Course">Delete Course</a>

Answer 1

I placed the jquery functions into the open method

open: function(){

To close the dialog instead of using:

$(this).dialog('close');

I used

dialog.remove();

My functions now work every time i open the dialog