We Keep Coding

How to handle event bubbling on tab slidder ul and li by using class or id selector in jquery

I have tab slidder there are number of anchor link's so,I am try preventdefault , return false , stoppropogation .I want to stop event bubbling by useing jquery.
Here is my HTML part.
<div class="ui-slider-tabs-list-wrapper">
<div class="ui-slider-tabs-list-container">
<ul class="ui-slider-tabs-list">
<li class="li-equity">
<a class="equity" id="equityAnchor_1" href="#equity_1" onclick="abc('');">
</a>
</li>
<li class="li-equity">
<a class="equity" id="equityAnchor_2" href="#equity_2" onclick="abc('');">
</a>
</li>
</ul>
</div>
</div>
jquery code-
$("a.ui-slider-tabs-list-wrapper").on("click", function (e){
e.stopImmediatePropagation();
e.preventDefault();
console.log( 'I was just clicked11!' );
});
I try e.stopPropogation();I try e.preventDefault();I try e.stopImmediatePropogation();Any Help.

jQuery: Click on a, page goes to top

I have two buttons on my website, they should show content when someone clicks on the button. But instead of showing content, the button takes me back to the top of the page.
jQuery Code
/********************
* Enable Vacature Dropdown
* *****************/
var vacatureClickHandler = $(function(){
$(".vacatures li").on("click", "a", function(event){
if(event.target.attr('id') == 'link-0'){
$('#content-0').toggleClass('active').fadeToggle();
event.preventDefault();
} else if(event.target.attr('id') == 'link-1'){
$('#content-1').toggleClass('active').fadeToggle();
event.preventDefault();
}
});
});
$(".vacatures li").on("click", "a", vacatureClickHandler);
HTML for the jQuery
<div class="section vacatures">
<h2>VACATURES</h2>
<h3>OP ZOEK NAAR NIEUWE <span>COLLEGA&apos;s</span></h3>
<ul>
<li>
<a id="link-0" href=""><span>OPEN SOLLICITATIE</span><span><img src="../../img/arrow_down.png"</span></a>
<p id="content-0">Blablabla</p>
</li>
<li>
<a id="link-1" href=""><span class="strike">ALLROUND DESIGNER</span><span class="hired">HIRED!</span><span><img src="../../img/arrow_down.png"/></span></a>
<p id="content-1">Blablabla</p>
</li>
</ul>
</div>
Here's the jsFiddle, what it has to do: someone clicks on the dropdown button and then the content shows.

1) You're forgot to include jQuery in jsFiddle
2) Place event.preventDefault(); outside of your if else condition
3) Use this.id instead of event.target.attr('id')
Final code for your click function look like:
$(".vacatures li").on("click", "a", function (event) {
event.preventDefault();
if (this.id == 'link-0') {
$('#content-0').toggleClass('active').fadeToggle();
} else if (this.id == 'link-1') {
$('#content-1').toggleClass('active').fadeToggle();
}
});
Updated Fiddle

If you just have one sibling next to the link you don't need the id's, don't need to "switch" and can use the siblings() method. See this (jsfiddle below):
JS
$('ul.nav > li > a').on('click', function(e){
e.preventDefault()
$(this).siblings().slideToggle();
})
CSS
.content {
display:none;
}
HTML
<div class="section vacatures">
<h2>VACATURES</h2>
<h3>OP ZOEK NAAR NIEUWE <span>COLLEGA&apos;s</span></h3>
<ul class="nav">
<li>
<span>OPEN SOLLICITATIE</span>
<p class="content">Blablabla</p>
</li>
<li>
<span class="strike">ALLROUND DESIGNER</span>
<p class="content">Blablabla</p>
</li>
</ul>
</div>
http://jsfiddle.net/josfaber/W835D/

JS are crashing after jquery load function

I tried to load my content with the jQuery load function into index.html's content area. I succeeded with that, but my Javascript isn't working. I want to call it on each click of my menu's elements. Is it possible?
click here to see the page
menu:
<div id="nav" class="section group">
<div id="menu" class="col span_9_of_12">
<ul id="navmenu">
<li>Hakkımda</li>
<li>Portfolyo</li>
<li>İletişim</li>
<li>Fotoğraflar</li>
</ul>
</div>
load function:
$(document).ready(function() {
$('#content').load($('#navmenu li a:last').attr('href'));
var hash = window.location.hash.substr(1);
var href = $('#navmenu li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#navmenu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('slow',loadContent);
$('#load').remove();
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('slow',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('slow');
}
return false;
});
});

UPDATE: My original answer no longer applies. OP changed the page implementation and question completely since I answered.
But as I stated in a comment below, The easytabs documentation states that the tab element and the panel divs must all be inside the container div.
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'>Hakkımda</li>
<li class='tab'>Portfolyo</li>
<li class='tab'>Fotoğraflar</li>
<li class='tab'>İletişim</li>
</ul>
<div id="hakkimda">
...
</div>
<div id="portfolyo">
...
</div>
<div id="iletisim">
...
</div>
<div id="fotograflar">
...
</div>
</div>

Rather than adding script inline, do this
$( "#jqc_content" ).load( "content/aboutme.html", function() {
carouselfn(); // call your carousel invocation function here
});
From documentation
Callback Function
If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed

I fixed it finally. It's all about the html structure.

Target parent next div

I´m trying to target a <div> which is the next <li> of the parent <div> of the function show_projectinfo(). I've tried .next(), .closest(), etc... with no luck, any ideas?
The function is that if I click on a.more_info then the li.slider img is hidden... I don´t know if it is out of scope completely... This is a div that is repeated so I can´t just use the IDs.
markup:
<li class="info">
<a id="previous-slider"> < </a>
<span>01/15</span>
<a id="next-slider" href="javascript:void(0)"> > </a>
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo()">Info</a>
</li>
<li class="slider">
<img src="img/horizontal.jpg" alt="horizontal" width="624" height="429">
</li>
this is the script:
function show_projectinfo(){
$(this).closest('.slider img').hide();
$('.info_content').fadeIn();
}

The basic problem is that you are calling the method from onclick instead of binding it with jquery.
In the way you use it, the this refers to the window and not the element that was clicked.
function show_projectinfo(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
$(function(){
$('.more_info').click(show_projectinfo);
});
and remove the onclick attribute from the html
If you have (although you shouldn't) to use the onclick attribute then pass it the this as an argument
function show_projectinfo(element){
$( element ).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
and
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo(this)">Info</a>

Try:
$(this).parent().next() // parent() should be the <li> then next() will get your next <li>

$('.more_info').click(function(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
});

Instead of .closest use .parent and .next, then select the img with .find.
Check out this jsFiddle:
$("a.more_info").bind("click", function(e){
e.preventDefault();
$(this).parent("li").next("li.slider").find("img").hide();
$('.info_content').fadeIn();
return false;
});

$('li').click( function (){
var nextLi = $(this).closest('div').next().children('li:first-child').attr('id');
console.log(nextLi);
});
Considering below markup:
<div id='div1'>
<li id='1'>1</li>
<li id='2'>2</li>
<li id='3'>3</li>
</div>
<div id='div2'>
<li id='4'>4</li>
<li id='5'>5</li>
<li id='6'>6</li>
</div>
You can see my live jsFiddle for more details.

Apply to function to multiple elements

HTML:
<div class="container-fluid">
<div class="sidebar">
<ul class="pills">
<li id="l1"><a id="link1">Lesson 1</a></li> <hr>
<li id="l2"><a href="#" >Lesson 2</a></li> <hr>
<li id="l3"><a href="#" >Lesson 3</a></li> <hr>
</ul>
<div class="span16" id="target">
</div>
Javascript:
$('#l1').click(function(){
$('#target').fadeOut('fast', function(){
$('#target').load("lesson/lesson1.html", function(){
$('#target').fadeIn('slow');
});
});
});
I have 5 links within my webpage, I was wondering if there was anyway to make this one piece of code instead of copy + pasting it multiple times.

$('a.AjaxLink').click(function(){
var url = this.href;
$('#target').fadeOut('fast')
.load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
});
return false;
});
This code handles the click event for all <a>s with a class of AjaxLink.
In the click handler, it grabs the href, fades out your #target, and performs the AJAX load.
When the AJAX load finishes, it stops the animation (in case the AJAX was faster than the fade), then fades it back in.
Finally, it tells the browser not to take the default action (navigating to the page) by returning false.

Use class instead of id. Select elements using class.
Also you can use .each() method

You could do this with a new jQuery method. Given this HTML:
<a class="hello" href="#">Hello</a>
<a class="goodbye" href="#">Goodbye</a>
<div id="target"></div>
You'd use this code:
jQuery.fn.switchTarget = function( target, href ) {
var $target = $(target);
this.bind( 'click', function(e) {
e.preventDefault();
$target.fadeOut('fast', function() {
$target.load( href, function() {
$target.fadeIn('slow');
});
});
});
return this;
};
$('.hello').switchTarget( '#target', 'hello.html' );
$('.goodbye').switchTarget( '#target', 'goodbye.html' );