Question

我刚刚开始在jquery和AJAX中工作，而且大多数情况下我似乎已经掌握了它，但是这一小段代码没有用。

我有一个显示文章摘要的页面。当您单击文章名称时，将显示一个弹出窗口，并显示文章信息以及右上角的X图标，即关闭文章窗口。

我正在通过AJAX处理表单处理，效果很好。弹出窗口，显示所有正确的信息。我遇到的问题是关闭按钮功能。

单击关闭按钮时，没有任何反应。我拥有的jquery似乎没有回应。如果我只使用纯jquery / css，则会出现窗口并关闭按钮。如果我使用HTML / PHP处理表单，它会显示窗口并关闭按钮。

只有当我通过AJAX处理呼叫时，关闭按钮才会响应，我不知道为什么会这样。

以下是关闭按钮的简单jquery代码：

$('.newsClose').click(function(){
        $('#newsWindow').hide();
    });

这是AJAX电话：

$(document).ready(function() {
    $('#agentNewsForm').submit(function(e) {  
    e.preventDefault();
    $.ajax({
            type  : 'POST',
            data : $('#agentNewsForm').serialize(),
            url  : '/search/customer/agentNewsView.inc.php',
            beforeSend : function() {
                $('#processing').show();
            },
            error : function() {
                $('#processing').hide();
                $('#ajaxFormError').show();
            },
            // success callback
            success : function (response) {
                $('#processing').hide();
                $('#newsWindow').html(response).show();

            },
            complete : function() {
                $('#processing').hide();
            },
            timeout : 3000,
        });  
    return false;
    });

});

我确信这是一件非常简单的事情。有什么想法吗？

Answer 1

$(document.body).on('click', '.newsClose' ,function(){
        $('#newsWindow').hide();
});

看到这个SO： Jquery event handler not working on dynamic content

Answer 2

关闭窗口的代码仅针对文档加载触发，而关闭按钮位于#newsWindow内，您可以通过以下两种方式解决此问题...

$('#newsWindow>.content').html(response).show();并将关闭按钮保持在.content区域之外。

或者您可以使用on方法绑定您对文档中添加的所有新dom的近距离点击。

$(body).on('click', '.newsClose', function(e){ e.preventDefault; $('#newsWindow').hide(); });

Answer 3

试试这个：

(function($){


var $newsWindow  = $('#newsWindow');

$('body').on('click','.newsClose',function(e){
    e.preventDefault();

    $newsWindow.hide();
});


$('body').on('submit','#agentNewsForm',function(e){

    e.preventDefault();

    var $el      = $(this);
    var $process = $('#processing');
    var $error   = $('#ajaxFormError');

    var _data = $el.serialize();

    $.ajax({
        type  : 'POST',
        data :  _data,
        url  : '/search/customer/agentNewsView.inc.php',
        beforeSend : function() {
            $process.show();
        },
        error : function() {
            $error.show();
        },
        success : function (response) {
            $newsWindow.html(response).show();

        },
        complete : function() {
            $process.hide();
        }
    });  

});
})(jQuery);

Jquery在AJAX表单结果显示中没有响应

3 个答案: