jquery - 尝试获取附加按钮以显示集合中的 block 隐藏元素并关闭所有其他按钮

Question

我有三个字段集，一旦单击前一组上的继续按钮，它们就会一次出现一个。我还在最近关闭的字段集父级上附加了另一个编辑按钮。编辑按钮的目的是允许某人打开那个特定的字段集。

我遇到的问题是，当单击编辑按钮时，它不会打开该集中的字段集。如果我只使用下面的代码而不使用其余代码，它就可以正常工作，所以我不确定为什么它不能与其余代码一起使用:

    $('.edit').click(function(){
    $(this).closest('.ap_sectionblock').find("fieldset").toggle();
});

这是我使用的代码:

http://jsfiddle.net/joseph_a_garcia/eFf9d/

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

您需要使用事件委托(delegate)，您的编辑按钮是动态创建的并附加到 DOM。但是当您的点击事件还不存在时，它们就绑定(bind)在 Document ready 上。因此，在任何时间点将事件附加到文档头或 DOM 中存在的任何其他容器，以便事件从指定容器委托(delegate)给将来创建的编辑按钮。

$('.ap_private_party_form').on('click', '.edit', function(){
    $(this).closest('.ap_sectionblock').find("fieldset").show();
});

对于 1.7+ 版本的 jquery 使用 on()对于旧版本，请使用 live .

更新您的延续问题

$('.close-and-show-next').click(function () {
    var $this = $(this);
    $this.closest('fieldset').hide();
    var $block = $this.closest(".ap_sectionblock");
    $block.find('.ap_sectionheader').append('<span><input type="button" class="edit" value="Edit"></span>');
    $block.next(".ap_sectionblock").find("fieldset").show();
    //return false;
});


$('.ap_private_party_form').on('click', '.edit', function () {
    $('.ap_sectionblock').find('fieldset:visible').hide(); // Just hide the fieldSets that are visible on click of edit of any so that only one is shown at a time.
    $(this).closest('.ap_sectionblock').find("fieldset").show(); // show this ones fieldset
    $(this).remove(); // remove the edit button as you don't need it any more on the edit page.
});

Demo