2

I have system that I'm modifying that uses jquery 1.5.1, which means .on doesn't exist.

I have a table and in this table I have multiple links listed in a row, and when the user clicks it opens a pop up window. I have the following code to create a pop up link. 

 <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>

In the first function below I open a popup window and it works perfectly except when you close the popup you can not reopen it from the link again. To solve this I subscribed my event lively and used delegate and live function. But when tracking it from the console I cannot seen any output from the console statement : 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

Why is this the case I used delegate method too and it does not work either. My delegate function:

 $(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

Thank you for your help.

*EDIT 1 After clesing the popup window when i click it it duplicates the responses somehow it is clicked as twice and when i refresh the page and click on it and then close the responses triples. What might cause this awkward situation? * **EDIT2 I solved the above problem by using close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:@Model.Id}); }. By this I reload the the div table and can click on any pop up.

4

5 回答 5

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
于 2013-05-29T07:12:37.443 回答
0

改成这样：

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

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

于 2013-05-29T12:20:45.137 回答
0

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

$('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
于 2013-05-30T08:12:00.790 回答
-1

使用.on而不是 live。不推荐使用live..

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

}
于 2013-05-29T07:08:50.110 回答
-2

on() 方法是 bind()、live() 和 delegate() 方法的新替代品。请使用 on()。

于 2013-05-29T07:14:42.003 回答