當通過AJAX調用頁面時jQuery不會運行第二次

我正在使用jQuery從用戶輸入搜索詞彙時從php類中加載搜索結果。問題在於，jQuery首次在主頁面上運行並執行所需功能，但是當用戶輸入搜索關鍵字並且結果通過ajax從同一頁面上的類文件加載時，jQuery不會執行功能需要。當通過AJAX調用頁面時jQuery不會運行第二次

我想要做的是，當搜索結果加載到主頁面時，它應該只顯示Quote和作者，而不是阿拉伯文和參考。當用戶點擊報價時，它應該像一個手風琴家一樣，切換阿拉伯文和參考的div容器。

但是，儘管jQuery可以很好地從類文件中加載結果，但它在加載搜索結果時不會執行隱藏阿拉伯文和引用的容器，也不會在用戶單擊引用顯示容器，如螢火蟲顯示。

的index.php：

<script type="text/javascript"> 
    $(function() { 

       $(".bsearch") 
        .keydown(function() { 
         //create post data 
          var postData = { 
          "search" : $(this).val() 
          }; 

          //make the call 
          $.ajax({ 
          type: "POST", 
          url: "quotes_in.php", 
          data: postData, //send it along with your call 
          success: function(response){ 
           $("#left").html(response); 
          } 
          }); 

        }), 




       $("div#smore").hide(); 
        //toggle the componenet with class msg_body 
       $("p#s_quotes").click(function() 
        { 
         $(this).next("div#smore").slideToggle(200); 
        }),   



       }); 

    </script> 

<!-- Begin Left Column --> 
     <div id="left"> 

     </div> 
<!-- End Left Column -->

Quotes_in.php：

include_once "inc/class.quotes.inc.php"; 
$quotes = new Quotes($db); 


if (isset($_POST['search'])) 
    $quotes->searchQuotes();

在類文件中的函數，用於格式化搜索：

---SQL QUERY for SEARCH--- 
    public function formatSearch($row, $search) 
       { 


        return "<div class=\"swrap\">" 
        . "<p id=\"s_quotes\">&nbsp;" . $cQuote . "&nbsp;</p>" 
        . "<div id=\"smore\"><p id=\"s_arabic\">" . $this->h($row['cArabic']) . "</p>" 
        . "<p id=\"s_reference\"><span class=\"source\">Source:</span> " . $this->h($row['vReference']) . "</p></div>" 
        . "<p id=\"s_author\"><b>-</b>&nbsp;" . $this->h($row['vAuthor']) . "</p></div>"; 
       }

來源

2010-08-13 input

這是becasue您的報價元素被替換，所以你需要在這裏使用.live()或.delegate()處理程序，而不是這樣：

$("p#s_quotes").click(function() { 
    $(this).next("div#smore").slideToggle(200); 
});

你需要這樣的：

$("p#s_quotes").live('click', function() { 
    $(this).next("div#smore").slideToggle(200); 
});

不像.click()結合事件處理程序的元素，這是越來越更換...等事件處理程序消失過，.live()添加一個事件處理程序到document，它會監聽點擊從p#s_quotes（這可能是只是#s_quotes）冒泡，並執行處理程序，如果發生。

對於遮擋部，無論是在你的success回調再打電話$("#smore").hide();，或創建它們隱藏起來，就像這樣：

<div id=\"smore\" style='display: none;'>

來源

2010-08-13 12:34:54

啊，感謝您的解釋，這是有道理的 – input 2010-08-13 13:13:56

重要的是要記住，當你連接jQuery的事件是它正在運行，目前狀態爲DOM，並且不一定適用於將來添加到DOM的任何元素。

要附加事件對象尚不存在（與本來就存在的項目一起，使用live()功能，像這樣：

 $("p#s_quotes").live("click", function() 
       { 
        $(this).next("div#smore").slideToggle(200); 
       }),

通過使用live()，jQuery將監測新的元素，因爲他們被添加到DOM中，並且如果它們與您的選擇器相匹配，則會將正確的處理程序應用到它們。

來源

2010-08-13 12:36:04

這是不正確的，'。live（）'不會監聽新元素或應用處理程序，它以完全不同的方式工作，請參閱我的答案以獲取簡要說明。 – 2010-08-13 12:40:16

@Nick Craver - 沒有冒犯，但Ryan Brunner正確地說了你的話，只是不夠專業和精通，不過他還是對的，但你也是這樣...... – SimonDowdles 2010-08-13 12:43:02

@webfac - 不，他沒有，這個部分是不正確的：「jQuery將監視新元素，因爲它們被添加到DOM，並且如果它們匹配您的選擇器，將會爲它們應用正確的處理程序」。我說它將一個事件處理程序*一個事件處理程序應用於'document'，這是正確的。它不以任何方式尋找新的元素並附加處理程序。 – 2010-08-13 12:45:09

當通過AJAX調用頁面時jQuery不會運行第二次

回答

相關問題