Jquery在AJAX表單結果顯示中沒有響應

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