javascript - jQuery AJAX 与普通表单的行为不同并在基于 div 的弹出窗口中调用

Question

当基于正常方法提交表单时，它完美地执行 jQuery AJAX。当提交弹出窗口中使用的相同表单时，不会执行 jQuery AJAX。这是为什么？代码如下。

表单提交脚本:

$("#submit").click(function (e) {
    /* $('form').submit(function() { // bind function to submit event of form   */
    if ($('form').attr('rel') == 'frm_jquery') {

        $('#result')
                .html('<span id="process">processing....</span>');

        $.ajax({
            type: $('form').attr('method'), // get type of request from 'method'
            url: $('form').attr('action'), // get url of request from 'action'
            data: $('form').serialize(), // serialize the form's data
            dataType: "json",
            success: function (data) {
                if (data.status == 'success') {
                    $('form')[0].reset();
                    $('#result').html(data.message);
                    setTimeout(function () {
                        $('#result').fadeOut('fast');
                        if (data.url != undefined)
                            window.location.replace(data.url);
                    }, 5000);
                }
                else if (data.status == 'error') {
                    $('#result').html(data.message);
                }
                else if (data.status == 'redirect') {
                    window.location.replace(data.url);
                }
            }
        });
        e.preventDefault();
        return false; // important: prevent the form from submitting
    }
});

弹出脚本:

$('.pop').click(function () {
    var src = $(this).attr('href'); //store url to variable
    var width = (($(this).attr('data-popwidth') != undefined) ? $(this).attr('data-popwidth') : 600);
    var height = (($(this).attr('data-popheight') != undefined) ? $(this).attr('data-popheight') : 500);
    if ($(window).width() < width) {
        width = "98%";
        var left_pos = "1%";
    }
    else {
        var left_pos = ($(window).width() - width) / 2 + 'px';
        width = width + "px";
    }
    if ($(window).height() < height) {
        height = "98%";
        var top_pos = "1%";
    }
    else {
        var top_pos = ($(window).height() - height) / 2 + 'px';
        height = height + "px";
    }
    $('#dv_move').remove();
    //add to body
    $('<div></div>')
            .prependTo('body')
            .attr('id', 'overlay');// add overlay div to disable the parent page

    var title = 'test';
    var html = '<div class="main" id="dv_move"  style="width:' + width + '; height:' + height + ';  left:' + left_pos + '; top:' + top_pos + '">';
    html += '<div id="dv_no_move" style="overflow-y: scroll;">';
    html += ' </div>';
    html += ' </div>';
    $('body').append(html);
    $("#dv_no_move").load(src);

    $("#img_close").click(function () {
        $('#overlay').fadeOut('slow');
        $('#dv_move').fadeOut('slow');
        setTimeout("$('#dv_move').remove();", 1000);
        //call Refresh(); if we need to reload the parent page on its closing
        parent.Refresh();
    });

    $("#img_close").mousedown(function () {
        return false;
    });
    //change close icon image on hover
    $("#img_close").mouseover(function () {
        $(this).css('opacity', '0.6');
        //            $(this).attr("src", 'close.png');
    });
    $("#img_close").mouseout(function () {
        $(this).css('opacity', '1');
        //            $(this).attr("src", 'close-red.png');
    });
    return false;
});

Answer 1

首先将事件处理程序附加到#submit。此时，表单尚未加载，因此事件处理程序未附加到任何内容。之后(当用户单击链接时)表单将在弹出窗口中打开。 #submit 没有附加任何事件处理程序，因为该代码在创建 #submit 之前运行。因此，当您单击它时什么也不会发生。

那么如何解决呢？您需要在表单加载后附加事件处理程序:

$("#dv_no_move").load(src, function() {
     //This code will run when the content has been loaded into the div.
     //Here we can attach the event handler to #submit.
     $("#submit").click(function(e) {
          //The code to do stuff when #submit is clicked should be placed here.
     });
});

请注意，无论加载的是什么，这都会将事件处理程序附加到#submit。也许您也使用同一页面来加载其他页面，但您不希望出现这种行为？那么上面的代码就会有问题。

相反，您可以将提交按钮的 JavaScript 放在单击弹出窗口加载的页面中(地址为 src 的页面)，或者从那里包含它。我认为您还应该将其包装在 $(function() { ... } 中。