Question

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

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

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

以下是我正在使用的代码：

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

任何帮助将不胜感激。感谢。

Answer 1

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

$('.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

Answer 2

编辑项目是在javascript绑定之后创建的。 jquery .on方法将通过将事件附加到最初加载时页面上的父元素来解决此问题。

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

最好将“on”绑定到最近的非更改元素而不是文档根目录，因为jquery必须在DOM中一直冒泡这个事件。它使复杂文档的速度更快。

http://jsfiddle.net/eFf9d/8/

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

2 个答案:

续订问题的更新

Demo