使用jquery触发输入输入值各自的li

Question

使用jquery，我想触发点击事件到各个输入值的li

下面是我的输入和li。每当我自动添加输入时，它就会添加到li列表中。所以现在我想要触发input enter的相应li元素

<input required="" placeholder="Type Collection Name" type="text" class="cbxwpbkmark-field cbxwpbkmark-field-text cbxwpbkmark-field-cat cbxwpbkmark-field-cat-add">
<span data-object_id="2089" class="cbxwpbkmark-field-create-submit" title="Create Collection"></span>



<ul class="cbxlbjs-list cbxwpbkmarklist" style="" data-type="product" data-object_id="2089">
<li class="cbxlbjs-item" data-catname="452" data-privacy="0" data-incat="0" data-value="96"><span title="452" class="cbxlbjs-item-name">452</span></li>
<li class="cbxlbjs-item" data-catname="450" data-privacy="0" data-incat="0" data-value="97"><span title="450" class="cbxlbjs-item-name">450</span></li>
<li class="cbxlbjs-item" data-catname="448" data-privacy="0" data-incat="0" data-value="101"><span title="448" class="cbxlbjs-item-name">448</span></li>
</ul>

目前我正在使用下面的jquery代码。

jQuery('.cbxwpbkmark-field-create-submit').click(function() {
    var catname = jQuery(".cbxwpbkmark-field-cat-add").val();

    setTimeout(function(){ 
                            var successmesg = $('.cbxwpbkmark-form-note-success').html();
                            if(successmesg == 'Category created/edited successfully!')
                            {
                             //$('.cbxwpbkmark-toolbar-editcat').trigger("click");
                              
                              jQuery(document).find('[data-catname="'+ catname +'"]').click();
                              //$('.cbxwpbkmark-toolbar-listcat').trigger("click");
                           
                             }
                        }, 1000);
           });

但是上面的例子不起作用。各自的li没有触发automatically.anone知道到底是什么问题，然后让我知道。

Answer 1

我假设您想要的是触发动态添加的<li>元素的单击事件。在这种情况下，您需要确保<li>的click事件附加到父元素或其他元素。

下面是一个例子：

jQuery(function($){
  $('ul.cbxwpbkmarklist').on('click', '.cbxlbjs-item', function(){

    //.. write the things to do when an <li> is clicked

  });
});

在这里，我将click事件附加到父<ul>上。因此，当您动态添加新的<li>元素(类为.cbxlbjs-item)时，<li>的click事件仍然有效。

除此之外，我还想指出@Swati在评论中的建议。

var successmesg = $('.cbxwpbkmark-form-note-success').html();

应该是：

var successmesg = $('.cbxwpbkmark-form-note-success').text();

这才是正确的方式。但是，如果.cbxwpbkmark-form-note-success元素中没有html标记，则调用html()仍然会返回文本。但更安全的方法是使用text()方法，因为它将只返回文本，即使其中有任何html标记。