2

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

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

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

这是我正在使用的代码：

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

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

4

2 回答 2

4

您需要使用事件委托，您的编辑按钮是动态创建的并附加到 DOM。但是，当您的点击事件尚不存在时，它们已绑定在 Document ready 上。因此，将事件附加到文档头或在任何时间点存在于 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.
});

演示

于 2013-06-21T03:28:00.567 回答
0

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

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

最好将“on”绑定到最近的不变元素而不是文档根，因为 jquery 将不得不在 DOM 中一直冒泡这个事件。它使复杂文档的处​​理速度更快。

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

于 2013-06-21T03:32:35.730 回答