jQuery的委托/现场不工作

Question

我正在修改的系统使用jquery 1.5.1 ，这意味着.on不存在。

我有一个表，并且在此表中，我在一行中列出了多个链接，当用户单击它时，会打开一个弹出窗口。 我有以下代码来创建一个弹出链接。

 <tr>
        <td class="view_detail_label">

        </td>
        <td>

           @Html.ActionLink(
           training.Name.Name,
           "AddSurvey",
           new
           {
               employeeId = Model.Id,
               trainingId = training.Id
           },
           new
           {
               @class = "addSurvey"
           }
       )

          <div class="result" style="display:none;"></div>

        </td>

    </tr>

在下面的第一个功能中，我打开一个弹出窗口，它可以正常工作，除了关闭弹出窗口时，您无法再次从链接中重新打开它。 为了解决这个问题，我生动地订阅了我的事件，并使用了委托和实时功能。 但是从控制台跟踪它时，我看不到控制台语句的任何输出： console.log($(this).next('.result')); 。

 $('.addSurvey').click(function () {
            $.ajax({
                url: this.href,
                type: 'GET',
                cache: false,
                context: this,
                success: function (result) {
                    $(this).next('.result').html(result).dialog({
                        autoOpen: true,
                        title: 'Anket',
                        width: 500,
                        height: 'auto',
                        modal: true

                    }); //end of dialog
                    //console.log($(this).next('.result'));
                } //enf of success function

            }); //end of ajax call
            return false;
        });

        $('a.addSurvey').live( 'click', function () {

            $.ajax({
                url: this.href,
                type: 'GET',
                cache: false,
                context: this,
                success: function (result) {
                    $(this).next('.result').html(result).dialog({
                        autoOpen: true,
                        title: 'Anket',
                        width: 500,
                        height: 'auto',
                        modal: true

                    }); //end of dialog
                console.log($(this).next('.result'));
                } //enf of success function

            }); //end of ajax call

        }); //end of live

为什么在这种情况下我也使用了委托方法，所以也不起作用。 我的委托函数：

 $(document).delegate(".addSurvey", "click", function () {

        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            context: this,
            success: function (result) {
                $(this).next('.result').html(result).dialog({
                    autoOpen: true,
                    title: 'Anket',
                    width: 500,
                    height: 'auto',
                    modal: true

                }); //end of dialog
                console.log($(this).next('.result'));
            } //enf of success function

        }); //end of ajax call

    });//end of delegate

谢谢您的帮助。

* 编辑1当我点击弹出窗口后，它会以某种方式复制响应，并两次单击，然后刷新页面并单击它，然后关闭响应三倍。 是什么原因导致这种尴尬局面？ * ** EDIT2我通过使用close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:@Model.Id}); }解决了上述问题close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:@Model.Id}); } close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:@Model.Id}); } close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:@Model.Id}); } 。 这样，我重新加载了div表，然后可以单击任何弹出窗口。

Answer 1

如果您正在使用live则无需拨打第一通电话。 尝试preventDefault()而不是return false 。

$('a.addSurvey').live( 'click', function (e) {

        e.preventDefault();
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            context: this,
            success: function (result) {
                $(this).next('.result').html(result).dialog({
                    autoOpen: true,
                    title: 'Anket',
                    width: 500,
                    height: 'auto',
                    modal: true

                }); //end of dialog
            console.log($(this).next('.result'));
            } //enf of success function

        }); //end of ajax call

    }); //end of live

Answer 2

更改为此：

$(".addSurvey").die().live("click", function (event) { event.stopPropagation();

.......其余代码。

Answer 3

大家好，我解决了我的问题，如下所示：在弹出窗口的关闭动作中，我从服务器重新加载了页面并为此重新呈现页面，现在它就像一个魅力一样工作。 感谢大家的时间和关注。

$('a.addSurvey').live('click', function (e) {
        var $this = $(this);
        e.preventDefault();
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            context: this,
            success: function (result) {
                $(this).next('.result').html(result).dialog({
                    autoOpen: true,
                    title: 'Anket',
                    width: 500,
                    height: 'auto',
                    modal: true,
                    close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:@Model.Id}); }
                }); //end of dialog
                console.log($(this).next('.result'));
            }, //enf of success function
            complete: function () {
                console.log("Complete");
            },
            error: function () {
                console.log("Error");
            }
        }); //end of ajax call
    });   //end o

Answer 4

使用.on而不是live。 live已弃用。

$('a.addSurvey').on( 'click', function () {

}

Answer 5

on（）方法是对bind（），live（）和委托（）方法的新替代。 请使用on（）。