jQuery显示/隐藏动态元素

jQuery to show/hide dynamic elements

本文关键字：动态 元素 隐藏 显示 jQuery      更新时间：2023-09-26

当我点击h3标签时，我想隐藏/显示ul元素。我试了一些例子，也许我错过了一些东西。

我的示例代码: 
$('#gallery').append('<h3 id="' + idx + '" >' + item.title._content + '</h3><ul style="display:none;" class="photos grp' + idx + '"></ul>');
$('h3#'+idx).click(function () {
   $(this).next('.photos.grp'+idx).toggle();
});

将处理程序附加到一个或多个事件上，用于匹配的所有元素选择器，现在或将来，基于一组特定的根

元素。
.delegate( selector, eventType, handler )
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

你可以使用jQuery委托事件处理程序，它可以用于你的动态添加元素。

。

$('#gallery').append('<h3 id="' + idx + '" >' + item.title._content + '</h3><ul style="display:none;" class="photos grp' + idx + '"></ul>');
$('h3#'+idx).on('click', function() {
   $(this).next('.photos.grp'+idx).toggle();
});

或

$('h3#'+idx).delegate('#gallery', 'click', function() {
   $(this).next('.photos.grp'+idx).toggle();
});

这里，#gallery是所有子元素的父元素。

因为你是动态的你应该使用这个

var id = 'h3#'+idx;
$('#gallery').on('click',id,function(){
    $(this).next('.photos.grp'+idx).toggle();
})

试试这个:

$('h3#'+idx).on('click',function () {
       $(this).next('.photos.grp'+idx).toggle();
  });
Because you are appending html from jquery then use `.on()` shown above.
相关文章：