javascript - 在同一页面上使用具有相同类的多个按钮处理 jquery 按钮单击

Question

所以我有一个功能，我为某种可重复的文本框构建了我可以通过单击按钮添加和删除的功能。

但我的问题是，现在当我想在同一页面上有 2 个单独的可重复框时，我无法单独单击按钮事件。

这是我用于可重复选项框的输出。

$output .= '<div class="option">';
$output .= '<div class="vf-sortable-holder">';
$output .= '<div class="vf-sortable vf-repeat-text empty-sortable hidden"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>';
$output .= '<input id="' . esc_attr( $value['id'] ) . '" class="vf-input" data-rel="' . esc_attr( $option_name . '[' . $value['id'] . ']' ) . '" type="text" value="' . esc_attr( $value['std'] ) . '" />';
$output .= '<a class="vf-delete-sortable button" href="#">'. __('Remove') .'</a>';
$output .= '</div>';

$output .= '</div>';
$output .= '<a class="vf-new-sortable button" href="#">Add new</a>';
$output .= '</div>';

这是我用来添加新文本框的js函数

//Add new field for repeatable option
$('.vf-new-sortable').click( function(event) {

    //Get parent element
    var loop = $(this).closest('.option');

    // Count all repeat group div's
    var count = loop.find('.vf-sortable').not('.empty-sortable').length;

    //Add new slide
    var new_slide = loop.find('.empty-sortable').clone(true).removeClass('empty-sortable hidden').insertBefore('.empty-sortable');

    var input = new_slide.find('input');

    var input_name = input.attr('data-rel');
    input.attr('name', input_name + '[' + ( count ) + ']');
    return false;
});

这应该做的是当页面加载时隐藏一个 vf-sortable div，当我点击按钮时它应该克隆它并制作另一个 vf-sortable 字段。

这行得通。但问题是当我输出 2 个或更多选项 div，并在按钮上单击可排序框时，它会在每个选项上添加新的 vf-sortable 框。我如何使事件仅在单击添加按钮的特定选项 div 上起作用？

Answer 1

您需要更改 .insertBefore() 以在实际 loop.find('.empty-sortable') 之前插入

$('.vf-new-sortable').click( function(event) {
    //Get parent element
    var loop = $(this).closest('.option');
    // Count all repeat group div's
    var count = loop.find('.vf-sortable').not('.empty-sortable').length;
    //Add new slide
    var emptysortable=loop.find('.empty-sortable');//get the element to clone
    var new_slide = emptysortable.clone(true).
                    removeClass('empty-sortable hidden').
                    insertBefore(emptysortable);//insert only in this .option
    var input = new_slide.find('input');
    var input_name = input.attr('data-rel');
    input.attr('name', input_name + '[' + ( count ) + ']');
    return false;
});    

http://jsfiddle.net/BCRt3/