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/

Answer 2

“我如何才能将事件设置为在单击添加按钮的特定选项div上工作？”

也许就像为每个选项添加一个id，然后点击按钮点击该特定选项id。

处理jquery按钮单击同一页面上具有相同类的多个按钮

2 个答案: