javascript - Jquery 委托(delegate)/直播不工作

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>

在下面的第一个函数中，我打开了一个弹出窗口，它工作得很好，除非你关闭弹出窗口，你不能再次从链接重新打开它。为了解决这个问题，我活跃地订阅了我的事件并使用了委托(delegate)和实时函数。但是当从控制台跟踪它时，我看不到控制台语句的任何输出: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

为什么会这样我也用了delegate方法，但还是不行。我的代表功能:

 $(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/DetailsS​​urvey', {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