Destramic Posted March 8, 2011 Share Posted March 8, 2011 hey guys if you view/see the script below ive made it will add a input field on click and also adds a cross (X) by the side just incase that input field needs to be deleted. but the problem im having is: <div id=\"remove_game_type\">x</div> doesnt work or execute the $('#remove_game_type').click function if anyone could help please <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/library/jquery.js"></script> </head> <body> <script> $(document).ready(function(){ var count = 1; $('#add_game_type').click(function() { count++; var game_type = $('<label>Game Type ' + count +':</label><input name=\"game_type' + count + '\" id=\"\" type=\"text\" value=\"\" /><div id=\"remove_game_type\">x</div><br />'); $("label#game_type").text("Game Type 1:"); $('input[name$="game_type"]').attr("name", "game_type1"); $(game_type).appendTo('#game_types'); }); $('#remove_game_type').click(function() { alert('remove'); }); }); </script> <label id="game_type">Game Type:</label><input name="game_type" /> <div id="game_types"></div> <div id="add_game_type"> Add Game Type</div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/230016-script-help-appendto/ Share on other sites More sharing options...
DavidAM Posted March 8, 2011 Share Posted March 8, 2011 You are adding the click function to remove_game_type during the document ready function. However, you have not added that DIV to the document yet, so there is nothing to add the click event to. JQuery has a way to cause that event assignment to affect all elements with the specified identifier that are created later, but I don't know the correct syntax or even what it is called. I don't think I even stated that well. One thing to watch out for. The way you have that written, ALL of our "X" DIVs will have that same exact ID. This is not valid in the DOM. The IDs must all be unique. I think you want to append the count to the DIV ID like you did for the field names. If you do that, you can move the click function assignment up into the add_game_type function, so immediately after creating the element, you assign the click function to it. Quote Link to comment https://forums.phpfreaks.com/topic/230016-script-help-appendto/#findComment-1184744 Share on other sites More sharing options...
Destramic Posted March 10, 2011 Author Share Posted March 10, 2011 ok well ive sorted that out now and im able to run remove_game_type on click...but the only problem im having is removing the last game type added if anyone could help me with the correct syntax please? page here: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/library/jquery.js"></script> <style> div { display : inline; } </style> </head> <body> <script> $(document).ready(function(){ var game_type_count = 1; $('#add_game_type').click(function() { game_type_count++; var game_type = $('<label for="game_type' + game_type_count + '">Game Type ' + game_type_count +' - Name : </label><input name=\"game_types[]\" id=\"game_type' + game_type_count + '\" type=\"text\" value=\"\" /><div id=\"remove_game_type\">x</div><br />'); $("label#game_type").text("Game Type 1 - Name :"); $("label#game_type_abbreviation").text("Game Type 1 - Abbreviation :"); $(game_type).appendTo('#game_types'); }); $('#remove_game_type').live('click',function(){ alert('remove'); $('#game_types').remove('<label for="game_type' + game_type_count + '">Game Type ' + game_type_count +' - Name : </label><input name=\"game_types[]\" id=\"game_type' + game_type_count + '\" type=\"text\" value=\"\" /><div id=\"remove_game_type\">x</div><br />'); if (game_type_count == 1) { $("label#game_type").text("Game Type - Name:"); } game_type_count--; }); }); </script> <label id="game_type" for="game_type1">Game Type - Name : </label><input id="game_type1" name="game_types[]" /> <label id="game_type_abbreviation" for="game_type1">Game Type - Abbreviation :</label><input id="game_type1" name="game_types[]" /> <br /><div id="game_types"></div><br /> <div id="add_game_type"> Add Game Type</div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/230016-script-help-appendto/#findComment-1185653 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.