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>');

Jquery点击功能对上传的html不起作用

1 个答案: