代码之家  ›  专栏  ›  技术社区  ›  Dan

jquery无法在ajx加载事件上从新div访问原始jquery对象

  •  1
  • Dan  · 技术社区  · 17 年前

    我有一个页面有一堆jquery对象。在同一个页面上,我有一个表单,您可以在一系列字段中输入搜索项,然后单击一个搜索按钮,该按钮将向服务器发送一个ajax请求,然后将生成的html加载到一个div.a非常简单的jquery应用程序…

    问题是这个。当您单击通过ajax加载到div中的搜索结果链接时,原始页面上的jquery代码将不会触发。例如,如果我在原始页面上添加了一个名为searchclick()的函数,则在每个 <a> 通过ajax加载到div中的标记,单击该链接会产生一个js错误,显示searchclick()未定义。但它是有定义的!我在ajax调用之前定义了它。我正在阅读jquery事件冒泡,但这似乎不是问题所在。我不确定,但我试过了,但还是没用。这是我现在的密码

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

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

    $(文档).ready(函数(){

        **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()未定义错误。 有人有什么建议吗?谢谢您!

    2 回复  |  直到 17 年前
        1
  •  2
  •   kgiannakakis    17 年前

    起初 live events 将使您的生活更轻松,因为您不必自己添加onclick处理程序。相反,您可以绑定一个事件处理程序,它也将应用于稍后添加到dom的元素(例如通过ajax调用)。

    至于你的问题,我没有解释。尝试使用firebug之类的工具监视html源代码和dom结构。

        2
  •  0
  •   MrHus    17 年前
    $("#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>
    

    它的形式不好。