We help IT Professionals succeed at work.

Jquery complex element adding

nazartttalent
on
I'm currently working on a project which involve product adding.
I'm trying to make all this dynamically by Jquery without refresh the browser.

I hv no problem on simple input adding like these http://muiomuio.com/tutorials/jquery/add-remove/

And my problem is how to generate the same thing inside the input that i just  generate.
I mean when I click the ADD button , the script will generate a bunch of input field and follow by another ADD and REMOVE button for it(because i want to add color or size to it)


These is the code im working with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add and Remove - jQuery tutorial</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

	var i = 2 ;
	
	$('a.add').click(function() {
        //when button clicked generate the input with add and remove button with unique value

$('<leon ><input type="text" name="input['+i+'][name]" /><input type="text" name="input['+i+'][desc]" /><input type="text" name="input['+i+'][code]" /><a href="#" class="attadd'+i+'">add</a><a href="#" class="attremove'+i+'">remove</a><div id="att'+i+'" >here the color</div></leon>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
		
		
		//-------------------------------------------------
	        //Of course after generate the new add and remove i have to add event listener so that the button is ready to be click

		$('a.attadd'+i+'').click(function() {

	$('<uiny><input type="text" name="input['+i+'][color][]" /><input type="text" name="input['+i+'][size][]" /></span>').animate({ opacity: "show" }, "slow").appendTo('#att'+i+'');
	});
	
	$('a.attremove'+i+'').click(function() {
		$('uiny:last').animate({opacity:"hide"}, "slow").remove();
	});

		//end of another event listener
		i++;

	});//end of a.add 


	$('a.remove').click(function() {
	if(i > 2) {
		$('leon:last').animate({opacity:"hide"}, "slow").remove();
		i--;
	}
	});//end of normal remove
	
	$('a.reset').click(function() {
	while(i >2) {
		$('leon:last').remove();
		i--;
	}

	});// end of normal reset


	$('a.attadd1').click(function() {

        //event listener for the first set of input

	$('<uiny><br/><input type="text" name="input['+i+'][color][]" /><input type="text" name="input['+i+'][size][]" /></span>').animate({ opacity: "show" }, "slow").appendTo('#att1');
	});
	
	$('a.attremove1').click(function() {
		$('uiny:last').animate({opacity:"hide"}, "slow").remove();
	});
	
	
	
});

</script>

<style rel="stylesheet" type="text/css">

h1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

.hide {visibility:hidden;}

#inputs{
	width:1050px;
	padding:20px;
	border:1px solid #f0f0f0;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	}
#leon{display:block;}
</style>
</head>

<body>

<h1>Add / remove text fields from webform</h1>

<a href="#" class="add">add</a> 
<a href="#" class="remove">remove</a>
<a href="#" class="reset">reset</a>



<div id="inputs">

<leon ><input type="text" name="input[1][name]" /><input type="text" name="input[1][desc]" /><input type="text" name="input[1][code]" /><a href="#" class="attadd1">add</a><a href="#" class="attremove1">remove</a><div id="att1">here the color</div>

</div>

</body>
</html>

Open in new window

test.html
Comment
Watch Question

Kiran SonawaneProject Lead
Top Expert 2011
Commented:
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add and Remove - jQuery tutorial</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">

$(function() {

  var i = 2 ;
  
  $('a.add').click(function() {
        //when button clicked generate the input with add and remove button with unique value

$('<leon ><input type="text" name="input['+i+'][name]" /><input type="text" name="input['+i+'][desc]" /><input type="text" name="input['+i+'][code]" /><a href="#" class="attadd'+i+'">add</a><a href="#" class="attremove'+i+'">remove</a><div id="att'+i+'" >here the color</div></leon>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
    
    
    //-------------------------------------------------
          //Of course after generate the new add and remove i have to add event listener so that the button is ready to be click

    $('a.attadd'+i+'').live("click",function() {
     $('<uiny><input type="text" name="input['+i+'][color][]" /><input type="text" name="input['+i+'][size][]" /></span>').animate({ opacity: "show" }, "slow").appendTo('#att'+(i-1));
  });
  
  $('a.attremove'+i+'').live("click",function() {
    $('uiny:last').animate({opacity:"hide"}, "slow").remove();
  });

    //end of another event listener
    i++;

  });//end of a.add 
  
  
  


  $('a.remove').click(function() {
  if(i > 2) {
    $('leon:last').animate({opacity:"hide"}, "slow").remove();
    i--;
  }
  });//end of normal remove
  
  $('a.reset').click(function() {
  while(i >2) {
    $('leon:last').remove();
    i--;
  }

  });// end of normal reset


  $('a.attadd1').click(function() { 

        //event listener for the first set of input

  $('<uiny><br/><input type="text" name="input['+i+'][color][]" /><input type="text" name="input['+i+'][size][]" /></span>').animate({ opacity: "show" }, "slow").appendTo('#att1');
  });
  
  $('a.attremove1').click(function() {
    $('uiny:last').animate({opacity:"hide"}, "slow").remove();
  });
  
  
  
});

</script>

<style rel="stylesheet" type="text/css">

h1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

.hide {visibility:hidden;}

#inputs{
  width:1050px;
  padding:20px;
  border:1px solid #f0f0f0;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  }
#leon{display:block;}
</style>
</head>

<body>

<h1>Add / remove text fields from webform</h1>

<a href="#" class="add">add</a> 
<a href="#" class="remove">remove</a>
<a href="#" class="reset">reset</a>



<div id="inputs">

<leon ><input type="text" name="input[1][name]" /><input type="text" name="input[1][desc]" /><input type="text" name="input[1][code]" /><a href="#" class="attadd1">add</a><a href="#" class="attremove1">remove</a><div id="att1">here the color</div>

</div>

</body>
</html>

Open in new window

Commented:
if you are using the latest version of jquery then use the on() event handler to attach a click listener, or if an older version of jquery use live().

So

$("a.add").on("click", function() {
// code here
}

Open in new window



http://api.jquery.com/on/
http://api.jquery.com/live/

This adds the click to any elements which match the selector any time the dom is updated, so in this case when a new <a> is added with the class "add" the function is then attached to that <a>

Hope that helps