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

jquery、php和ajax问题:无法使动态链接加载动态内容

  •  0
  • ray  · 技术社区  · 14 年前

    有一个伟大的 tutorial on IBM's website 它使用jquery、php和ajax引导我浏览了一个简单的搜索/结果列表。

    我能让它工作,真的很酷。

    一个问题。我希望结果是超链接,并且无法在结果上运行任何Java脚本。

    以下是我拥有的脚本(包括教程中的内容以及覆盖超链接所需的附加脚本,单击行为):

    <script type='text/javascript'>
    $(document).ready(function(){
    $("#search_results").slideUp();
    $("#search_button").click(function(e){
    e.preventDefault();
    ajax_search();
    });
    $("#search_term").keyup(function(e){
    e.preventDefault();
    ajax_search();
    });
    $("a").click(ClickInterceptor);
    });
    
    function ajax_search(){
    $("#search_results").show();
    var search_val=$("#search_term").val();
    $.post("./find.php", {search_term : search_val}, function(data){
    if (data.length>0){
    $("#search_results").html(data);
    }
    })
    }
    
    function ClickInterceptor(e)
    {
    window.alert("Hellow World!");
    return false;
    }
    </script> 
    

    如果我在 <body> 标签:

    <a href="test">this will work</a>
    

    将显示警报窗口。

    但是,如果我将结果更改为超链接(在 find.php,清单7 从教程中):

    $string .= "<a href=\"test\">".$row->name."</a> - "; 
    

    它不起作用。

    你知道怎么解决这个问题吗?

    2 回复  |  直到 14 年前
        1
  •  2
  •   Brian McKenna    14 年前

    这个 click 函数在运行时绑定。你需要把它改成 live binding .

    $("a").live("click", ClickInterceptor);
    

    或者,您可以在更新搜索结果时将其绑定在 $("#search_results").html(data) 以下内容:

    $("#search_results a").click(ClickInterceptor);
    
        2
  •  0
  •   Dereleased    14 年前

    问题其实很简单, $("a").click(ClickInterceptor); 将只查找当前存在于DOM中的项。您只需将该行更改为:

    $("a").live("click", ClickInterceptor);
    

    我也建议花些时间来了解更多 jQuery's Events/live .