Question

当用户输入搜索词时，我正在使用jQuery从php类加载搜索结果。问题是jQuery在主页面上第一次运行并执行所需的函数，但是当用户输入搜索关键字并且结果是通过ajax从同一页面上的类文件加载时，jQuery不会执行需要的功能。

我想要做的是，当搜索结果加载到主页面上时，它应该只显示引用和作者，而不是阿拉伯语和引用。当用户点击Quote时，它应该像手风琴一样，切换阿拉伯语和引用的div容器。

然而，虽然jQuery可以很好地加载类文件的结果，但是当它加载搜索结果时它不会执行隐藏阿拉伯语和引用的容器，也不会在用户点击引用时运行click事件像萤火虫一样展示容器。

的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>"; 
                }

Answer 1

因为你的引用元素正在被替换，所以你需要在这里使用.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）以冒泡，并在发生这种情况时执行处理程序。

对于隐藏部分，请在$("#smore").hide();回调中再次拨打success，或者将其隐藏起来，如下所示：

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

Answer 2

在JQuery上附加事件时要记住的重要一点是，它在当前正在运行，对于DOM的当前状态，并不一定适用于将来添加到DOM的任何元素。 / p>

要将事件附加到可能尚不存在的对象（以及已存在的项目，请使用live()函数，如下所示：

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

通过使用live()，jQuery将在添加到DOM时监视新元素，如果它们与您的选择器匹配，则会将正确的处理程序应用于它们。

当通过ajax调用页面时，jQuery不会第二次运行

2 个答案: