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>'; 

這是我用來添加一個新的文本框

//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-排序DIV隱藏這是什麼應該做的是js函數，當我點擊按鈕應該克隆它，並創建另一個可以排序的字段。

這個工程。但問題是，當我輸出2個或更多選項的div與按鈕上的可排序框點擊它添加新的vf可排序框在每個選項。我如何讓事件只在點擊添加按鈕的特定選項div上工作？

Answer 1

您需要更改您的.insertBefore（）實際loop.find（ '空排序'）這樣

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