在JQuery对话框中通过ajax加载PartialView后执行的Javascript只工作一次

我知道这是一个很长的标题^^

我使用的是MVC4和JQuery版本1.8.2

我正在JQuery对话框中加载PartialView，一切正常

最近，我想添加一些Javascript，在对话框中隐藏一个文本框，现在开始我的痛苦

Javascript隐藏代码可以工作：

• 只有一次，如果我用$（this.dialog（'close'）关闭对话框
• 每次，如果我用$（this.remove（））关闭对话框

我不是JQuery/Javascript方面的专家，但我想了解发生了什么：）

这是我的密码：

$(function dialogLink() {

// Don't allow browser caching of forms
$.ajaxSetup({ cache: false });

// Wire up the click event of any current or future dialog links
$('.dialogLink').on('click', function () {
    var element = $(this);

    // Retrieve values from the HTML5 data attributes of the link       
    var dialogTitle = element.attr('data-dialog-title');
    var updateTargetId = '#' + element.attr('data-update-target-id');
    var updateUrl = element.attr('data-update-url');

    // Generate a unique id for the dialog div
    var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
    var dialogDiv = "<div id='" + dialogId + "'></div>";

    // Load the form into the dialog div
    $(dialogDiv).load(this.href, function () {        

        $(this).dialog({
            modal: true,
            height: 'auto',
            width: 'auto',
            resizable: false,
            title: dialogTitle,
            buttons: {
                "Save": function () {
                    // Manually submit the form                       
                    var form = $('form', this);
                    $(form).submit();
                },
                "Cancel": function () { $(this).dialog('close'); }
                //"Cancel": function () { $(this).remove(); }
            }
        });

        // Enable client side validation
        $.validator.unobtrusive.parse(this);

        // Setup the ajax submit logic
        wireUpForm(this, updateTargetId, updateUrl);


        // Working only once code
        $('#PossibleAnswerContainer').hide();

        $('#StatisticDataType').on('change', function (e) {
            e.preventDefault();

            if ($(this).val() === 'List') {
                $('#PossibleAnswerContainer').show();
            } else {
                $('#PossibleAnswerContainer').hide();
            }
        });

    });
    return false;
});
});

function wireUpForm(dialog, updateTargetId, updateUrl) {
$('form', dialog).submit(function () {

    // Do not submit if the form
    // does not pass client side validation
    if (!$(this).valid())
        return false;

    // Client side validation passed, submit the form
    // using the jQuery.ajax form
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            // Check whether the post was successful
            if (result.Success) {
                // Close the dialog
                $(dialog).dialog('close');

                // Reload the updated data in the target div
                $(updateTargetId).load(updateUrl);

            } else {
                // Reload the dialog to show model errors                   
                $(dialog).html(result);

                // Enable client side validation
                $.validator.unobtrusive.parse(dialog);

                // Setup the ajax submit logic
                wireUpForm(dialog, updateTargetId, updateUrl);
            }
        }
    });
    return false;
});
}

$（函数dialogLink（）{
//不允许浏览器缓存表单
$.ajaxSetup（{cache:false}）；
//连接任何当前或未来对话框链接的单击事件
$（'.dialogLink'）。在（'click'，函数（）{
var元素=$（此）；
//从链接的HTML5数据属性中检索值
var dialogTitle=element.attr（'data-dialog-title'）；
var updateTargetId='#'+element.attr（'data-update-target-id'）；
var updateUrl=element.attr（'data-update-url'）；
//为对话框div生成唯一id
var dialogId='uniqueName-'+Math.floor（Math.random（）*1000）
var dialogDiv=“”；
//将表单加载到对话框div中
$（dialogDiv）.load（this.href，函数（）{
$（此）。对话框({
莫代尔：是的，
高度：“自动”，
宽度：“自动”，
可调整大小：false，
标题：dialogTitle，
按钮：{
“保存”：函数（）{
//手动提交表单
变量形式=$（'form'，this）；
$（表单）.submit（）；
},
“取消”：函数（）{$（this）.dialog（'close'）；}
//“Cancel”：函数（）{$（this）.remove（）；}
}
});
//启用客户端验证
$.validator.unobtrusive.parse（this）；
//设置ajax提交逻辑
wireUpForm（this，updateTargetId，updateUrl）；
//只工作一次代码
$（'PossibleAnswerContainer'）.hide（）；
$（'#StatisticDataType'）。关于（'change'，函数（e）{
e、 预防默认值（）；
if（$（this）.val（）=='List'）{
$（'PossibleAnswerContainer'）.show（）；
}否则{
$（'PossibleAnswerContainer'）.hide（）；
}
});
});
返回false；
});
});
函数wireUpForm（对话框、updateTargetId、updateUrl）{
$（'form'，dialog）.submit（函数（）{
//如果表格不正确，请不要提交
//未通过客户端验证
如果（！$（this）.valid（））
返回false；
//客户端验证通过，请提交表单
//使用jQuery.ajax表单
$.ajax({
url:this.action，
类型：this.method，
数据：$（this）.serialize（），
成功：功能（结果）{
//检查发布是否成功
如果（结果、成功）{
//关闭对话框
$（dialog.dialog（'close'）；
//在目标div中重新加载更新的数据
$（updateTargetId）.load（updateUrl）；
}否则{
//重新加载对话框以显示模型错误
$（对话框）.html（结果）；
//启用客户端验证
$.validator.unobtrusive.parse（对话框）；
//设置ajax提交逻辑
wireUpForm（对话框、updateTargetId、updateUrl）；
}
}
});
返回false；
});
}

这种说法是错误的

on（）

不像

.live（）

那样工作，因为一旦附加

.live（）

它将检测动态添加的元素

应该是

$(document).on('click', '.dialogLink'), function(){

要将未来的事件处理程序附加到名为，

.dialogLink

的静态元素，请执行以下操作

---

另外，将

$（document）

替换为最接近的静态父元素，例如

$（“#container”）

，因此，我得出以下结论：

$(this).dialog({
                modal: true,
                height: 'auto',             
                width: 'auto',
                resizable: false,
                title: dialogTitle,
                buttons: {
                    "OK": function () {
                        // Manually submit the form                       
                        var form = $('form', this);
                        $(form).submit();
                    },
                    "Cancel": function () { $(this).dialog('close'); }      
                },
                close: function () { $(this).remove(); } 
            });

---

谢谢你的回答，我试着设置你的建议$（#Foo'）。在我的视图中（'click'，'.dialogLink'）、function（）{//Do things}上，我添加了包含Css类.dialogLink链接的函数。当我点击链接时，我遇到了JS错误：对象不支持属性或方法“apply”。有什么想法吗？

（'click'，'dialogLink'），

在

'之后不应该有一个右括号。dialogLink'

好的，我的.on是正确的，现在可以工作了。但我仍然存在//只工作一次代码部分的问题：/

$(this).dialog({
                modal: true,
                height: 'auto',             
                width: 'auto',
                resizable: false,
                title: dialogTitle,
                buttons: {
                    "OK": function () {
                        // Manually submit the form                       
                        var form = $('form', this);
                        $(form).submit();
                    },
                    "Cancel": function () { $(this).dialog('close'); }      
                },
                close: function () { $(this).remove(); } 
            });