Question

我有一个包含大量JQuery对象的页面。在同一页面上，我有一个表单，您可以在其中输入一系列字段中的搜索字词，然后单击搜索按钮，然后搜索按钮将向服务器发送AJAX请求，然后将生成的HTML加载到div中。一个非常简单的Jquery应用程序......

问题是这个。当您单击通过ajax加载到div中的搜索结果链接时，原始页面上的Jquery代码将不会触发。例如，如果我在原始页面上添加一个名为searchClick（）的函数，那么我将onClick =“searchClick（）”添加到通过ajax加载到div中的每个<a>标记中，单击该链接会产生一个JS错误，表示searchClick（）未定义。但是它被定义了！我在AJAX调用之前定义了它。我正在阅读Jquery事件冒泡但这似乎不是问题。我不确定，但我已经尝试过它仍然没有用。这是我目前的代码

浏览器加载页面时加载的主页上的

：

<script language="javascript" type="text/javascript">

$（document）.ready（function（）{

...

    **function searchClick(value)** {
      alert("here");
    }

     $('#search').click(function() {
             description = urlencode($("#description").val());
             manufacturer = urlencode($("#manufacturer").val());
             product = urlencode($("#product").val());
             category = urlencode($("#category").val());
             subcategory = urlencode($("#subcategory").val());

             $(**'#search_results'**).**load**('/productSearch.php?description=' + description + '&product=' + product + '&category=' + category + '&subcategory=' + subcategory')

       });

    ...
    </script>

    <div id="**search_results**"></div>

以下是调用ajax查询时在search_results div中显示的链接示例（load（））

<a href="#" onclick="s**earchClick("some value")"**>Product 1</a>

单击上面示例中的该链接将产生searchClick（）未定义的错误。有人有什么建议吗？谢谢！

Answer 1

首先live events会让您的生活更轻松，因为您不必自己添加onclick处理程序。相反，您可以绑定一个事件处理程序，该处理程序也将应用于稍后添加到DOM的元素（例如通过AJAX调用）。

至于你的问题，我没有解释。尝试使用像Firebug这样的工具监视html源代码以及DOM结构。

Answer 2

$("#search").live("click", function()
{
    var description = urlencode($("#description").val());
    var manufacturer = urlencode($("#manufacturer").val());
    var product = urlencode($("#product").val());
    var category = urlencode($("#category").val());
    var subcategory = urlencode($("#subcategory").val());

   $.ajax
   ({
        type: "GET",
        url: "/productSearch.php",
        data: 'description=' + description + '&product=' + product + '&category=' + category +"&subcategory=" + subcategory,
        success: function(result)
        {   
            $("#search_result").html(result);
        }
    });
});

添加新元素时使用JQuery Live事件，它们仍会对事件做出反应。不要使用

<a href="#" onclick="s**earchClick("some value")"**>Product 1</a>

它的不良形式。

Jquery无法从ajax load事件上的新div访问原始jquery对象

2 个答案: