Jquery - 可重複的表單域 - 添加不起作用

我對JQuery相當陌生，我試圖通過單擊按鈕添加多個表單域。雖然我可以刪除現有的字段，但我無法添加新的字段。Jquery - 可重複的表單域 - 添加不起作用

我的HTML代碼：

<div class="repeatable-wrap"> 
    <ul id="tracks-repeatable" class="repeatable-fields-list"> 
     <li> 
      <input type="text" name="fr_options1" value="" size="200" /> 
      <a class="repeatable-field-remove button" href="#">REMOVE</a> 
     </li> 
    </ul> 
</div> 
<a class="repeatable-field-add button" href="#">ADD</a>

而且Jquery的：

jQuery(function(jQuery) { 
    jQuery('.repeatable-field-add').click(function() { 
     var theField = jQuery(this).closest('div.repeatable-wrap').find('.repeatable-fields-list li:last').clone(true); 
     var theLocation = jQuery(this).closest('div.repeatable-wrap').find('.repeatable-fields-list li:last'); 
     jQuery('input', theField).val('').attr('name', function(index, name) { 
      return name.replace(/(\d+)/, function(fullMatch, n) { 
       return Number(n) + 1; 
      }); 
     }); 
     theField.insertAfter(theLocation, jQuery(this).closest('div.repeatable-wrap')); 
     var fieldsCount = jQuery('.repeatable-field-remove').length; 
     if (fieldsCount > 1) { 
      jQuery('.repeatable-field-remove').css('display', 'inline'); 
     } 
     return false; 
    }); 

    jQuery('.repeatable-field-remove').click(function() { 
     jQuery(this).parent().remove(); 
     var fieldsCount = jQuery('.repeatable-field-remove').length; 
     if (fieldsCount == 1) { 
      jQuery('.repeatable-field-remove').css('display', 'none'); 
     } 
     return false; 
    }); 
});

來源

2012-11-23 Manolis

你重複場加鏈接外的重複 - 包裝div，所以當你打電話.closest('div.repeatable-wrap')它不會找到任何NG。

移動的div裏面讓你在正確的軌道上 - http://jsfiddle.net/Z4kYf/1/

來源

2012-11-23 22:07:15 Enrico

沒錯至點，謝謝！ – Manolis

小雞這段代碼....

 jQuery(function(jQuery) { 
jQuery('.repeatable-field-add').click(function() { 
var theField = jQuery('div.repeatable-wrap').find('.repeatable-fields-list li:last').clone(true); 

    // console.log(theField); 
    var theLocation = jQuery('div.repeatable-wrap').find('.repeatable-fields-list li:last'); 
    jQuery('input', theField).val('').attr('name', function(index, name) { 
     return name.replace(/(\d+)/, function(fullMatch, n) { 
      return Number(n) + 1; 
     }); 
    }); 
    theField.insertAfter(theLocation, jQuery(this).closest('div.repeatable-wrap')); 
    var fieldsCount = jQuery('.repeatable-field-remove').length; 
    if (fieldsCount > 1) { 
     jQuery('.repeatable-field-remove').css('display', 'inline'); 
    } 
    return false; 
}); 

jQuery('.repeatable-field-remove').click(function() { 
    jQuery(this).parent().remove(); 
    var fieldsCount = jQuery('.repeatable-field-remove').length; 
    if (fieldsCount == 1) { 
     jQuery('.repeatable-field-remove').css('display', 'none'); 
    } 
    return false; 
}); 
});

來源

2012-11-23 22:09:00 IbrahimAsad

我的看法：

http://jsfiddle.net/hUrZB/

<ul class='list'><li class='repeat'> 
    <input type='text' name="options"/> 
    <input class='remove' type='button' value="remove"/> 
    <li> 
</ul> 
     <input class='add' type='button' value='add'/> 

$(function() { 
    var list = $(".list"); 
    var repeatable = $("li.repeat").clone(true); 
    repeatable.on("click", ".remove", function(e) { 
     $(this).parent(".repeat").remove() 
    }); 
    var add = $(".add"); 
    add.click(function(){`enter code here` 
     r = $(repeatable).clone(true); 
     r.find("[name=options]").attr("value","something"); 
     list.append(r); 
    }); 
    $(".repeat").remove(); 
    list.append(repeatable); 
});

來源

2012-11-23 22:47:23 mpm

Jquery - 可重複的表單域 - 添加不起作用

回答

相關問題