我正在使用 jquery modal，在每个模态中我都有一个表单。然后我将某些 jquery 函数加载到表单元素上，例如 jquery 自动完成。
当我第一次打开模式时，脚本中的所有 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>