Jquery 无法从动态项中选择/获取文本

我使用的是Knockout.js，当用户开始在搜索框中输入实时过滤时，会出现一个下拉列表。目前，用户可以在列表中按箭头键，然后按enter键填充搜索框

我的电脑里有一个直播版本

但是，我希望用户能够滚动列表并单击项目。我不太清楚这些列表项在DOM中的位置，因为Knockout.js会动态添加它们

下面是有问题的代码的特定部分：

<div class="hidden" id='dropdown'>
    <ul id='dropdownList'
        data-bind="template: { name:'objects', foreach:obj }, 
                   click: function(){ $('#search').text(($(this).val());}">
    </ul>
</div>

---

看起来它正在使用listObjItem类创建列表项，所以您可以这样做

$(function(){
   $(document).on('click', '.listObjItem', function(){
       $('#search').val($(this).text());
   });
});

<ul id='dropdownList' data-bind="template: { name:'objects', foreach:obj }, 
            click: function(){ 
                $('.listObjItem').on('click', function(){
                        $('#search').val($(this).text())
                        $('#dropdown').hide();
                        $('#search').focus();
                    ;});
                }"></ul>

 <ul id='dropdownList' data-bind="template: { name:'objects', foreach:obj }"></ul>

编辑

从下面的评论中帮助澄清。现在，您的代码如下所示

$(function(){
   $(document).on('click', '.listObjItem', function(){
       $('#search').val($(this).text());
   });
});

<ul id='dropdownList' data-bind="template: { name:'objects', foreach:obj }, 
            click: function(){ 
                $('.listObjItem').on('click', function(){
                        $('#search').val($(this).text())
                        $('#dropdown').hide();
                        $('#search').focus();
                    ;});
                }"></ul>

 <ul id='dropdownList' data-bind="template: { name:'objects', foreach:obj }"></ul>

我要说的是将代码更改为如下所示

$(function(){
   $(document).on('click', '.listObjItem', function(){
       $('#search').val($(this).text());
   });
});

<ul id='dropdownList' data-bind="template: { name:'objects', foreach:obj }, 
            click: function(){ 
                $('.listObjItem').on('click', function(){
                        $('#search').val($(this).text())
                        $('#dropdown').hide();
                        $('#search').focus();
                    ;});
                }"></ul>

 <ul id='dropdownList' data-bind="template: { name:'objects', foreach:obj }"></ul>

并在结束正文标记之前添加以下内容

<script type="text/javascript">
$(function(){
    $(document).on('click', '.listObjItem', function(){
       $('#search').val($(this).text());
       $('#dropdown').hide();
       $('#search').focus();
   });
});
</script>

单击处理程序中的这是模型数据。Knockout提供事件对象作为第二个参数，然后您可以使用event.target：

---

这似乎可以做到！谢谢，布莱克。尽管值得注意的是，不管出于什么原因，似乎需要点击两下才能选择它。请查看：。有什么想法吗？看看这个。我想这就是原因。@Jon如果您在document.ready中初始化.onclick事件，我想它会解决问题。