JQuery. how do I create nested buttons with well defined onclick action (MODIFIED) -
for little project (which involves nested forms), seems need below. not sure how pass parameters x
, y
have nested buttons. need nested button 'knows' under outer button is. how achieve that? there way write $(".add_field_button_sub_"+x+"")
?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title> test </title> <script src="jquery-3.2.0.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function() { var wrapper = $(".input_fields_wrap"); var x = 0; //initial text box count $(".add_field_button").click(function(e){ if(x < 10){ $( "<div><div>hello! ("+x+")</div><div><button class=\"add_field_button_sub_"+x+"\">sub button "+x+"</button></div><br><a href=\"#\" class=\"remove_field\">remove</a></div><hr>" ).insertbefore( '.add_field_button' ); var y = 0; //initial text box count $(".add_field_button_sub_"+x+"").click(function(e){ if(y < 10){ $( "<div><div>hello sub! ("+x+"."+y+")</div><br><a href=\"#\" class=\"remove_field\">remove</a></div><hr>" ).insertbefore( ".add_field_button_sub_"+x+"" ); y++; } }); x++; } }); $(wrapper).on("click",".remove_field", function(e){ //user click on remove text e.preventdefault(); $(this).parent('div').remove(); }) }); </script> </head> <body> <h3>test</h3> </br> <div class="input_fields_wrap"> <button class="add_field_button">fonti</button> </div> </body> </html>
Comments
Post a Comment