• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 684
  • Last Modified:

jquery save selection to variable then search from that variable

I have some code that will keep appending divs with input boxes when someone clicks a button.  The div that is added is at the bottom of the page that I plan to use display: none, so it will not show.  This way I can have a template of what I want to append and just put it at the bottom of my page.  I also have a remove button in the div so if you add one you can then remove it.

I can successfully clone and append the div to my document.  When I bind my remove function to the remove button, I do not want to do it based on class name because my template has the same class name.  I realize that it is hidden, but I don't want the template to have an event, just the one that was cloned and appended to.

I can save my selection to a variable, but I can't search from this variable.

Sorry for the rough explanation, but if you look at the code below, I wrote what I am trying to do in the comments.  The code below works as is, but the remove even is bound to the template, which is not what I want.

<html>
<head>
<title></title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
        function add(data){
                if(!data)
	                $(".Template").show();  //this will eventually go away, I don't want to show my template, but it is here for testing
			var divToCloneAndAppend = $(".Template").clone().removeClass("Template");
						
			//this is what I would like to do so the event will only bind to the appended element, not the template
			/*
			divToCloneAndAppend('.deleteParent').click(function(){ 
			$(this).parent().remove();
			});
			*/

			divToCloneAndAppend.appendTo('#ItemSizes');

			//This works but it attaches the event to the template
			$('.deleteParent').click(function(){ 
			$(this).parent().remove();
			});
        }
        </script>
</head>
<body>

	<DIV id="ItemSizes"></div>

	<input type="button" onclick="add()" value="Add One"/>

	<DIV class="Template" style="display: none" >
		<input type="text" name="price[]" />
		<input type="button" class="deleteParent" value="remove">
	</DIV>

Open in new window

0
jackjohnson44
Asked:
jackjohnson44
1 Solution
 
ajitha75Commented:
Try this code....
<html>
<head>
<title></title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
		var idgen = 1;
        function add(data){
                //if(!data)
	              //  $(".Template").show();  //this will eventually go away, I don't want to show my template, but it is here for testing
			var divToCloneAndAppend = $(".Template").clone();
			
			
			//this is what I would like to do so the event will only bind to the appended element, not the template
			/*
			divToCloneAndAppend('.deleteParent').click(function(){ 
			$(this).parent().remove();
			});
			*/


			divToCloneAndAppend.appendTo('#ItemSizes');
			$(divToCloneAndAppend).removeClass("Template");
			$(divToCloneAndAppend).attr("id", "id" + idgen+1);
			idgen++;

			$(divToCloneAndAppend).show();
			//This works but it attaches the event to the template
			//$('#' + idgen + " input[1]").click(function(){ 
			//$(this).parent().remove();
			//});
        }

		function remove()
		{
			var ele = event.srcElement;
			$(ele).parent().remove();
		}
        </script>
</head>
<body>

	<form>

	<DIV id="ItemSizes"></div>

	<input type="button" onclick="add()" value="Add One"/>

	<DIV class="Template" style="display: none" >
		<input type="text" name="price[]" />
		<input type="button" onclick="javascript:remove()" class="deleteParent" value="remove">
	</DIV>
	</form>
</body>
</html>

Open in new window

0
 
kadabaCommented:
why not use jquery completely.. also

 var ele = event.srcElement;
 is IE specific..

Check this code where I have assigned a id to the remove button and then attach the onclik event

<html>
<head>
<title></title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
		var elementCounter = 0;
		function add(data){
			if(!data)
			var divToCloneAndAppend = $(".Template").clone().removeClass("Template");
			divToCloneAndAppend.find('.deleteParent').attr("id","div_"+elementCounter);
								
			divToCloneAndAppend.appendTo('#ItemSizes');

			$('#div_'+elementCounter).click(function(){ 
				$(this).parent().remove();
			});
			divToCloneAndAppend.show('slow');
			elementCounter++;
		}
	</script>
</head>
<body>
	<DIV id="ItemSizes"></div>
	<input type="button" onclick="add()" value="Add One"/>
	<DIV class="Template" style="display: none" >
		<input type="text" name="price[]" />
		<input type="button" class="deleteParent" value="remove">
	</DIV>
</body>
</html>

Open in new window

0
 
HaloWebProjectsCommented:
or shy not use the original code you have provided in the question but add

return false;

as the last line of the click handler function

this way the click even wont bubble down and will stop after the click function is executed...
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now