javascript - Adding fields using jquery -
i'm trying allow user add , remove email fields in view using jquery. whenever either link click nothing happens.
html/cshtml
<div id="emailsection"> <ul> <li>email(s) send notice to.</li> <li><input type="email" name="emails[]" /><a href="#" class="remove_field">remove</a></li> <li><a class="add_email_button ui-button" href="#" >add email</a></li> </ul> </div> js
<script type="text/javascript"> $(document).ready( function() { ... $('.remove_field').on("click", function (e) { e.preventdefault(); $(this).parent('li').remove(); }); $('.add_email_button').on('click', function (e) { e.preventdefault(); $(this).insertbefore('<li><input type="email" name="emails[]" /><a href="#" class="remove_field">remove</a></li>'); }); } ); </script> here fiddle
the insertbefore must used on other way :
$(/* need insert */ ).insertbefore(/* before ?*/); in case must use :
var html = '<li><input type="email" name="emails[]" /><a href="#" class="remove_field">remove</a></li>'; $(html).insertbefore( $(this) ); works me : http://jsfiddle.net/yj6ydbgp/
---------[ edit ]------------
for remove:
1/ need create event on parent, check new remove button (or they'll not click event after creation).
2/ waqnt delete < li > parent, , not < div > parent.
new, working add , remove http://jsfiddle.net/yj6ydbgp/1/
Comments
Post a Comment