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}); }解决了上述问题。通过这个我重新加载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已被弃用..

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

}

Answer 5

on（）方法是bind（），live（）和delegate（）方法的新替代品。请使用on（）。

Jquery delegate / live不起作用

5 个答案: