I have the following UL:
<ul class="xbreadcrumbs" style="position:absolute; bottom:0px">
<li>A Crumb</li>
</ul>
This is being dynamically created by my javascript. How can I override the click for each LI that is inside of a UL called xbreadcrumbs in jQuery and have it do something instead of go to a new hyperlink?
Also, how can I get the behavior to be different for each li?
Updated:
$.each('.xbreadcrumbs li', function(){
$(this).live('click',function(e){
e.stopPropagation();
console.log('clicked for each li');
});
});
Live is part of the answer, the other part of the answer is that you need to use the event's target property to know which element was actually clicked.
$('.xbreadcrumbs li').live('click', function(e){
e.preventDefault();
console.log('Clicked on element', e.target);
});
Once you add the ul dynamically to the DOM you could subscribe to the .click() event of the inner lis:
$('.xbreadcrumbs li').click(function() {
// do something when the li is clicked
});
you'll have to use the .live() function so that dynamically created elements get the event attached...
$("ul.xbreadcrumbs li").live("click", function() {
//do something
}
Use a live event:
$('.xbreadcrumbs li').live('click', function(){
//override here
});
Since the </ul> is being added dynamically it is best to use $.live() or $.delegate() like this:
$('.xbreadcrumbs li').live('click', function(e){
e.stopPropagation();
console.log('Clicked');
});
Hope this helps!
Related
I created a ul containing li elements. I want to to slide down a div when a link in the same li is clicked.
The problem is when I click the link all divs are shown.
I use PHP for setting the id on each link.
The html code is here:
<li class='post'>
<div class='link'>
</div>
<div class='slidedown'>//here is what I want to sliding</div>
</li>
The jQuery code is here :
$(".link a").click(function(){
var id_post = $(this).attr("id");
$(".slidedown").slideDown("slow");
return false;
});
You can do it even more easy:
jQuery
$('.link').on('click', function() {
$(this).parent().find('.slidedown').slideDown('slow');
});
Or you use:
$('.link a').on('click', function() {
$(this).closest('.slidedown').slideDown('slow');
});
Go to .closest() or .parent() at jQuery Docs to learn more.
Here's the code that works well:
$(".link").click(function(){
$(this).siblings('.slidedown').slideDown('slow');
});
You can use parent() to move up a level and next() to target the next sibling:
$(".link a").click(function(){
$(this).parent(".link").next(".slidedown").slideDown("slow");
return false;
});
Or you can access the .post using closest() and target the .slidedown using find() or children():
$(".link a").click(function(){
$(this).closest(".post").find(".slidedown").slideDown("slow");
return false;
});
Use .parent() to move up one parent. Since the container were looking for is the .post we'll have to move up 2 parents. Then we can find the child of it that is .slidedown and slide that one down with .slideDown()
$(".link a").click(function(){
$(this).parent().parent().children('.slidedown').slideDown("slow");
});
<script type="text/javascript" src="/js/jquery1.8.3.js"></script>
<script>
$(document).ready(function(){
$("li").has("ul").bind("click",function(e){
console.log($(this).text());
});
});
</script>
<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
</ul>
How can I bind click-event only when Fruit is clicked, not Apple, Banana
I hope that click-event is not occured when Apple or Banana is clicked
please help me..
One way, as already illustrated, is with event.stopPropagation(). I dislike this method, since it prevents any other event handlers on the page registering the event.
Better is to check to see if the event originated in another li element. Something like this would do:
$("li").has("ul").bind("click",function(e){
if ($(e.target).closest('li').get(0) !== this) {
return;
}
console.log($(this).text());
});
Let's break apart the key line there:
get e.target, the element where the event originated
make a jQuery object out of it
check to see if that element is an li or get its nearest li ancestor (closest does this)
get that li as a native DOM element
compare the li to the one where the event handler was bound
If the li elements are not the same, the event originated on a nested li. If they are the same, it didn't.
jsFiddle
Wrap you 'Fruit' with an element (like span), and bind the event on this element.
From Quentin's advice, use an element that will tell the user that it is interactive (like <button>, <a>), it's better in fact.
<script type="text/javascript" src="/js/jquery1.8.3.js"></script>
<script>
$(document).ready(function(){
$("ul li").on("click",function(e){
alert($(this).text())
});
or
$("ul li").live("click",function(e){
alert($(this).text())
});
});
</script>
<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
</ul>
No need to prevent. Based on your jquery plugin version use live or on. Both are same. If you use this it'll handle the click event that which element you are clicked.
The live() method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead
Try this.
$("li").has("ul").bind("click",function(e){
console.log($(this).text());
e.cancelBubble = true;
e.returnValue = false;
//e.stopPropagation works only in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
});
Try this : working example
$("li").has("ul").bind("click", function (e) {
if (!$(e.target).find("li").length) return;
console.log($(this).text());
});
$(document).ready(function () {
$("li").has("ul").bind("click", function (e) {
console.log($(this).text());
});
$("li ul").bind("click", function (e) {
e.stopPropagation()
});
});
Demo: Fiddle
Another solution without stopping the event propagation is something like(will work for the given markup)
$(document).ready(function () {
$("li").has("ul").bind("click", function (e) {
if ($(this).is(e.target)) {
console.log($(this).text());
}
});
});
Demo: Fiddle
I have this code in my html
<span id="u_0_10">You can also <a rel="my_Feed" href="#" ajaxify="send_notify?Qid=10&part=99">feed</a>Send me this feed</span>
I want to know can I find that anchor with jQuery and fire its onclick in jQuery?
You can do it like this,
Live Demo
$('#u_0_10 a').click(function(){
alert($(this).text());
});
$('#u_0_10 a').click();
You can learn more about jQuery selectors and click event here.
This css should work.
"span#u_0_10 a"
$('#u_0_10 > a').each(function() {
// do your stuff
});
Since noone clicked the link I'll do it
$('#u_0_10 > a').trigger("click")
try this code
For particular span with id myId
$('#myId a').click(function() {
/ process click event here
});
For all the span with css myKlass
$('.myKlass a').click(function() {
/ process click event here
});
For All the span
$('span a').click(function() {
/ process click event here
});
I want to do something when I click anywhere, except when I click a div and it's children. This is what I've tried so far, but it's not working (clicking on it's children still executes what is within the brackets.
$('body').on('click', '* :not(#calculator)', function(e){
I cannot use something like this:
jQuery - Select everything except a single elements and its children?
$("body > *").not("body > #elementtokeep").remove();
Because the .not function is not something I can put inside the .on() function.
How can I achieve this?
Use not with a comma to have both selectors: the element itself and the elements children
jQuery(document.body).on("click", ":not(#calculator, #calculator *)", function(e){
console.log(this);
e.stopPropagation();
});
jsFiddle
You could check inside the function for the element in question:
$('body').click( function(e){
if (!$(e.target).is("#calculator") || $("#calculator").has(e.target).length ) {
// do your stuff
}
});
I don't have enough requirement to add commend, so I need to ask my question here to #epascarello. When I made few children, A and B still affected. I am not sure I am wrong or not, but I really want to get solution.
jQuery(document.body).on("click", ":not(#calculator, #calculator *)", function(e){
console.log(this);
e.stopPropagation();
alert('test');
});
Live Demo
Instead of
$('body').on('click', '* :not(#calculator)', function(e){
});
You can use (this version is preferred as it is more performant)
$("body").on("click", ":not(#calculator, #calculator *)", function(e){
});
or
$("body :not(#calculator, #calculator *)").on("click", function(e){
});
I have this jQuery code:
$(".topic_form").hide();
$("#edit_topics_link").click(function(e) {
e.preventDefault();
$(".topic_form").show();
$(this).hide();
$("<a href='#' id='done_link'>Done</a>").insertBefore(".topic_form");
});
$("#done_link").click(function(e) {
e.preventDefault();
$(this).remove();
$(".topic_form").hide();
$("#edit_topics_link").show();
});
The first half of the code does this: it hides a form when the page loads. Then when you click a link, it shows the form, hides the clicked link, and adds a new link. This works 100% fine.
The 2nd half of the code doesn't work. When you click the newly added link, it should remove it, show the old link, and re-hide the form. Nothing happens when I click the newly added link. Why is this? How can I fix it?
Because the element to which you're attaching the click-handler to doesn't exist at the time of the document's loading, there are no events attached. You should be able to use live() to fix this:
$("#done_link").live('click', function(e) {
e.preventDefault();
$(this).remove();
$(".topic_form").hide();
$("#edit_topics_link").show();
});
The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation: a handler bound to an ancestor element is responsible for events that are triggered on its descendants.
You could also use delegate() on the ancestor element of the #done_link element:
$("#parentElementSelector').delegate('#done_link', 'click', function(e) {
e.preventDefault();
$(this).remove();
$(".topic_form").hide();
$("#edit_topics_link").show();
});
References:
live().
delegate().
The reason it doesn't work is that when you call the second part of the script the link doesn't exist yet. There are 2 ways to solve it. Either move the second part into the first part. That way the attachment of the event handler happens when the link exists:
$(".topic_form").hide();
$("#edit_topics_link").click(function(e) {
e.preventDefault();
$(".topic_form").show();
$(this).hide();
$("<a href='#' id='done_link'>Done</a>").insertBefore(".topic_form")
.click(function(e) {
e.preventDefault();
$(this).remove();
$(".topic_form").hide();
$("#edit_topics_link").show();
});
});
Or use the live method to assign the handler. The live method will watch the dom and whenever something with the selector you specified (in this case .topic_form) appears it will attach the event to it:
$(".topic_form").hide();
$("#edit_topics_link").click(function(e) {
e.preventDefault();
$(".topic_form").show();
$(this).hide();
$("<a href='#' id='done_link'>Done</a>").insertBefore(".topic_form");
});
$("#done_link").live('click', function(e) {
e.preventDefault();
$(this).remove();
$(".topic_form").hide();
$("#edit_topics_link").show();
});