1 Replies - 1946 Views - Last Post: 20 June 2012 - 09:31 PM

#1 midasxl   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 215
  • Joined: 03-December 08

clone function not work in ie7

Posted 19 June 2012 - 05:31 AM

Hello and thanks for your time. Why this not work in ie7?

<script src="../includes/js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
						   
//From main form area
$('.dhcp0').click(function(){//inject the html block into the container
			if($(this).val() == "Yes"){
				$('#spanContainer').html('<div id="inputContainer0"><div id="inputs0"><input type="text" name="IP_Start0" class="IP_Start" /></div></div><button type="button" id="cloneInput">ADD FIELD</button>').fadeIn('fast');
				
				$('#cloneInput').click(function(){//create additional input fields via clone function
					var inputNum = $('#inputContainer0 > div').length;
					var newInput = $('#inputs0').clone().appendTo('#inputContainer0');
					newInput.find('input[type=text]').val("");//clear all cloned input fields
				});
				
			}else{
				$('#spanContainer').fadeOut('fast');	
			};
	 });
						   
	//Clone main form area
	$('#clone').click(function(){
		var hostNum = $('#cloneContainer > div').length;//get the number of child divs within cloneContainer (there will always be at least 1)
		var newForm = $('#cloneMe0').clone().prop('id', 'cloneMe' + hostNum);
		newForm.find('input[type=text]').val("");//clear all cloned input fields
		newForm.find('input:radio:checked').prop('checked', false);//clear all radio buttons
		newForm.find('#inputs0').children('input:not(:first)').remove();//remove all but the first input text field
		newForm.find('.dhcp0').each(function(){$(this).prop('name', 'DHCP' + hostNum)});//rename radio groups so they are independent of each other
		newForm.find('#spanContainer').html('').hide();
		
		newForm.find('.dhcp0').bind("click", function(){
			if($(this).val() == "Yes"){
				$('#cloneMe' + hostNum + ' .spanContainer').html('<div id="inputContainer0"><div id="inputs0"><input type="text" name="IP_Start0" class="IP_Start" /></div></div><button type="button" id="cloneInput" class="cloneInput">ADD FIELD</button>').fadeIn('fast');
				
				$('#cloneMe' + hostNum + ' .IP_Start').prop('name', 'IP_Start' + hostNum);
				$('#cloneMe' + hostNum + ' #inputContainer0').prop('id', 'inputContainer' + hostNum);
				
				[color="#FF0000"]$('#cloneMe' + hostNum + ' .cloneInput').bind('click', function(){[/color]
					var inputCount=$('#cloneMe' + hostNum + ' #inputContainer' + hostNum + ' > div').length;
					var clonedInput = $('#cloneMe' + hostNum + ' #inputContainer' + hostNum + ' #inputs0').clone().prop('id', 'inputs' + hostNum);
					clonedInput.find('input[type=text]').val("");//clear all cloned input fields
					clonedInput.appendTo('#cloneMe' + hostNum + ' #inputContainer' + hostNum);
				});
			}else{
				$('#cloneMe' + hostNum + ' .spanContainer').fadeOut('fast');	
			};
		});


		$('#ipCount').attr('value', (hostNum + 1));
		
		newForm.appendTo('#cloneContainer');
		
  	});
});
</script>
</head>

<body>
<form action="arrayNew.cfm" method="post" name="arrayForm">
	<div id="cloneContainer">
        <div class="theClones" id="cloneMe0"><!---This gets counted cloned and appended below--->
        
        <h5>Does the host obtain IP through DCHP?</h5>
        <label for="DHCP0">Yes<input type="radio" name="DHCP0" class="dhcp0" value="Yes" /></label>
        <label for="DHCP0">No<input type="radio" name="DHCP0" class="dhcp0" value="No" /></label>
        
            <div id="spanContainer" class="spanContainer" style="display:none;"></div>
            
        </div>
    </div>
    
    <button type="submit">Submit</button>
    <button type="button" id="clone">Clone Me</button>
    <input type="hidden" id="ipCount" name="ipCount" value="1" />
</form>
</body>
</html>



Everything works well in ie8. In ie7 the only issue is with the red color coded click function in the block above. Why not work in ie7? I'm researching on my own and have seen issues with ie7 and id's vs. classes.

Thanks for any insight you may have!

Cheers!

Is This A Good Question/Topic? 0
  • +

Replies To: clone function not work in ie7

#2 cupidvogel   User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: clone function not work in ie7

Posted 20 June 2012 - 09:31 PM

In line 38, you are binding a click event to an element which was not present at page-load. So it shouldn't be working in any browser. You should use on or live or delegate. See if it solves whatever issue you are having.

This post has been edited by cupidvogel: 20 June 2012 - 10:08 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1