2009-09-24 60 views
0

代码如下一个简单的自动提示框......但是当我点击列表中的建议时,它不会将内容返回到输入框。它根本不能识别加载的html中的任何内容?JQuery:加载HTML并点击返回值来输入字段

JQUERY

$(document).ready(function(){ 
    $('#edit-name').keyup(function() { 
     if ($(this).val().length >= 3) { 
      bname = $(this).val(); 
      $("#searchframe").load("searchresults.php", { 'name[]': [name] }); 
     } else { 
      $("#searchframe").html(''); 
     } 
    }); 

    $('.bus').click(function() { 
      alert("testing"); // <-- nothing happens! 
     $('#edit-name').val($(this).html()); 
    }); 
}); 

HTML

... 
<body> 
    ... 
    <input type="text" id="edit-name" /> 
    <div id="searchframe"></div> 
    ... 
</body> 
... 

INJECTED HTML

<ul> 
    <li><a href="#" class="bus">test1</a></li> 
    <li><a href="#" class="bus">test2</a></li> 
</ul> 

回答

2

click事件势必在文件负载和HTML注入后出现这种情况。我建议使用live方法,该方法将事件绑定到页面上所有当前和将来的元素。

$('.bus').live('click', function() { 
    alert("testing"); // <-- something (should) happen! 
    $('#edit-name').val($(this).html()); 
}); 
+0

这是一个比我的更完整的答案:) 很棒! – changelog 2009-09-24 10:03:40

0

您正在设置加载自动填充建议中的DOM之前的点击事件。

尝试在注入的HTML内部添加该动作并让我知道它是如何发生的。

1

您的具有“bus”类的元素在DOM负载中不存在(您稍后会动态注入它们),因此不会应用click功能。

您可以使用jQuery的live()方法将点击函数应用于所有动态添加的元素。

$('.bus').live('click', function() { 
     alert("testing"); // <-- nothing happens! 
    $('#edit-name').val($(this).html()); 
});