JQuery：加载html并单击返回值到输入字段答案

【问题标题】：JQuery: load html and click return value to input fieldJQuery：加载html并单击返回值到输入字段
【发布时间】：2009-09-24 18:03:37
【问题描述】：

下面的代码用于简单的自动建议框...但是，当我从列表中单击建议时，它不会像应有的那样将内容返回到输入框。它根本无法识别加载的 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>
...

注入的 HTML

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

【问题讨论】：

标签： jquery autocomplete

【解决方案1】：

在文档加载时绑定点击事件，并且在发生这种情况之后注入 HTML。我建议使用live 方法，它将事件绑定到页面上所有当前和未来的元素。

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

【讨论】：

这比我的答案更完整 :) 很好！

【解决方案2】：

带有“bus”类的元素在 DOM 加载时不存在（您稍后会动态注入它们），因此不会应用您的点击功能。

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

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

【讨论】：

【解决方案3】：

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

尝试在注入的 HTML 中添加该操作，然后告诉我它是如何进行的。

【讨论】：