Question

我正在使用jquery模态，在每个模态中我都有一个表单。然后我将某些jquery函数加载到表单元素上，例如jquery autocomplete。

当我第一次打开模态时，它与脚本中的所有jquery函数一起正常工作，但是一旦我关闭第一个模态并再次打开，所有函数都不起作用。

就好像它们在页面加载到表单上绑定一样，然后当单击该按钮时它的工作模式然后关闭模态解除绑定它。

有没有人知道为什么他们会在第一次模态打开/关闭后停止工作？

$(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;
}

以下是每种模式的按钮。

<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

我将jquery函数放入open方法

open: function(){

关闭对话框而不是使用：

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

我用过

dialog.remove();

每次打开对话框

时，我的功能现在都有效

模态中的jquery函数仅在首次打开时工作，在关闭后重新打开它们停止工作

1 个答案: