Question

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

我的示例代码：

$('#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();
});

Answer 1

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

.delegate( selector, eventType, handler )

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

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

e.g。在你的情况下

$('#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 是所有子元素的Parent元素。

Answer 2

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

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

Answer 3

试试这个：

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

Because you are appending html from jquery then use `.on()` shown above.

jQuery显示/隐藏动态元素

3 个答案: