One Click Stopping Second Click

**Deadweight** · 10-15-2013, 01:17 AM

Title is a little long i admit and i dont know what else to class it but here is the problem...
I have two click function in my jquery:

Code:

         $('ul#nav_menu').children('li').click(function() {
		
		$('ul#nav_menu').children('li').addClass('normal');
		$(this).removeClass('normal').addClass('select');
		var name = '#inner_content';
		var value = $(this).index();
		var content = $('#hidden_content>div:eq('+value+')').html();
		$(name).html('').slideUp(100);
		$(name).slideDown(300);
		$(name).html(content);
		
	});

	$('.dropper').children('.sub_title').click(function(){
		if($(this).hasClass('closed')){
			$(this).removeClass('closed').addClass('opened');
			$(this).next('.content').slideDown(300);
		}else{
			$(this).next('.content').slideUp(300);
			
			$(this).delay(300).queue(function(reset_delay){
				$(this).addClass('closed').removeClass('opened');
				reset_delay();
			});
		}
	});

However, if i click the first object to change the top tabs it will not allow me to click the drop down buttons. I do not know why what is causing this problem. Any help would be great.

The actual url: http://www.thebcelements.com

The completed code:

Code:

<!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=utf-8" />
<title>Body slide</title>

<link rel="stylesheet" href="main.css" />
<script src="jquerymain2-0.js"></script>
<script>
$(function() {
	$('ul#nav_menu').children('li').addClass('normal');
	$('ul#nav_menu').children('li').first('li').removeClass('normal').addClass('select');
	$('#inner_content').html($('#hidden_content>div:eq(0)').html());
	
	
	$('ul#nav_menu').children('li').click(function() {
		
		$('ul#nav_menu').children('li').addClass('normal');
		$(this).removeClass('normal').addClass('select');
		var name = '#inner_content';
		var value = $(this).index();
		var content = $('#hidden_content>div:eq('+value+')').html();
		$(name).html('').slideUp(100);
		$(name).slideDown(300);
		$(name).html(content);
		
	});

	$('.dropper').children('.sub_title').click(function(){
		if($(this).hasClass('closed')){
			$(this).removeClass('closed').addClass('opened');
			$(this).next('.content').slideDown(300);
		}else{
			$(this).next('.content').slideUp(300);
			
			$(this).delay(300).queue(function(reset_delay){
				$(this).addClass('closed').removeClass('opened');
				reset_delay();
			});
		}
	});
	
});


</script>
</head>

<body>

<div id="main_body">

<div id="main_header">Title</div>
<div id="nav_wrapper">


<ul id="nav_menu">
	<li>Link 1</li>
	<li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
</ul>

<div class="expander"></div>
</div>
<div id="main_content">

<div id="inner_content">

</div>

</div>
<div id="footer">
Randoms
</div>


</div><!-- End Main Body -->

<div id="hidden_content">
	<div>
    	Link 1
        
        <div class="dropper">
        <div class="sub_title closed">Sub Group 1</div>
        <div class="content">
        Content 1
        </div>
        </div>
        
        
        <div class="dropper">
        <div class="sub_title closed">Sub Group 2</div>
        <div class="content">
        Content 2
        </div>
        </div>
        
        
        <div class="dropper">
        <div class="sub_title closed">Sub Group 3</div>
        <div class="content">
        Content 3
        </div>
        </div>
        
        
        <div class="dropper">
        <div class="sub_title closed">Sub Group 4</div>
        <div class="content">
        Content 4
        </div>
        </div>
        
	</div>
    
    
<div>

Link 2    

</div>


<div>
Link 3<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br /></div>
<div>Link 4</div>
<div>Link 5</div>

</div>



</body>
</html>

**jscheuer1** · 10-15-2013, 03:33 AM

Here's the main problem:

Code:

$(name).html(content);

When you do that, it creates new markup that hasn't yet been initialized.

That won't matter if you listen to the document instead of the markup (change highlighted):

Code:

	$(document).on('click', '.dropper>.sub_title', function(){
		if($(this).hasClass('closed')){
			$(this).removeClass('closed').addClass('opened');
			$(this).next('.content').slideDown(300);
		}else{
			$(this).next('.content').slideUp(300);
			
			$(this).delay(300).queue(function(reset_delay){
				$(this).addClass('closed').removeClass('opened');
				reset_delay();
			});
		}
	});

**Deadweight** · 10-15-2013, 03:54 AM

Awesome thanks so much. I see what you are saying about making .html
This will most likely help me with this other problem that was happening on another code i was trying.
Thanks again