Jquery 单击功能在附加的 html 上不起作用

Question

我正在尝试将 li 的子 html 附加到div.row 。 第一次函数正常工作，但第二次它不起作用，但是我对 jquery 选择器使用相同的类。

我搜索了它并找到了 jquery delegate() ，我也尝试过它和 jquery on('click','',function(){...}); 但两者都不适用于附加功能。

 $( "body" ).delegate( ".list-group li a", "click", function(event) { event.preventDefault(); if ( $(this).parent().children('ul').length > 0 ) { $('.append-level').append( '<div class="col-md-3 col-xs-12 col-sm-6">'+ '<h2>Child List Group</h2>'+ $(this).parent().children('ul').html()+ '</div>'); } });

 .hide-child{display:none}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row append-level"> <div class="col-md-3 col-xs-12 col-sm-6"> <h2>Parent List Group</h2> <ul class="list-group" id="level-one"> <li class="list-group-item"><a href="#">First item</a></li> <li class="list-group-item"><a href="#">Second item</a></li> <li class="list-group-item"><a href="#">Third item</a> <ul class="list-group hide-child"> <li class="list-group-item"><a href="#">First item</a></li> <li class="list-group-item"><a href="#">Second item</a></li> <li class="list-group-item"><a href="#">Four Third item</a> <ul class="list-group hide-child"> <li class="list-group-item"><a href="#">First item</a></li> <li class="list-group-item"><a href="#">Second item</a></li> <li class="list-group-item"><a href="#">Third item</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </div>

任何人都可以指导我如何通过 jquery 在附加的 html 上实现 jquery，我很感激。 谢谢你。

Answer 1

你的 delegate() 函数很好（注意 on() 现在是首选，但在引擎盖下与 delegate() 完全一样）

您的问题是您的选择器或 html。 您的原始项目在“.list-group”内，但您的附加项目不在，因此选择器不会找到它们。

编辑：上述问题是因为 .html 只复制 ul 元素的内部html。 要克隆实际的 ul，请将它们包装起来，然后获取包装元素的 .html。 这似乎有效：（你也可以使用 .clone()）

$('.append-level').append(
                        '<div class="col-md-3 col-xs-12 col-sm-6">'+
                            '<h2>Child List Group</h2>'+
                            $(this).parent().children('ul').wrap('<div/>').html()+
                        '</div>');