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

我刚开始真正在jquery和AJAX中工作，而且大部分时间我似乎都有这个问题，但是这一小块代码不起作用。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; 
    }); 

});

我敢肯定，这是很简单的东西，我很想念。有什么想法吗？

来源

2013-12-19 Tom R.

感谢您的建议。就像我说的，AJAX还有点新鲜。学习这些细节并且还没有与控制台功能混淆。下次会记住这一点。 –

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

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

来源

2013-12-19 19:22:32

谢谢！这是我需要的确切答案。它现在工作完美。 –

感谢您的+1 :) –

您的代码以关闭该窗口只开火文档负载以及关闭按钮里面#newsWindow，您可以通过以下两种方式之一解决此...

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

或者您可以使用on方法，该方法将绑定您添加到文档中的所有新dom的关闭点击。

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

来源

2013-12-19 19:26:09 cmorrissey

试试这个：

(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);

来源

2013-12-19 19:37:38

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

回答

相关问题