Part of a bigger solution, I have accordion-type jQuery control that implements headers as jQuery toggle buttons. Each header also has to have a help balloon. In nutshell, the setup is similar to that posted at this jsFiddle .
<div id="button1">Go to main action <span id="span1" style="color:blue">Help</span> </div>
<div id="out"/>
$('#button1').button().click(function(){
$('#out').text('Button clicked');
});
$('#span1').click(function(){
$('#out').text('Span clicked');
});
Is that possible to make it so I can click on the Help span, which is located inside the button div? Or, will button always get the events for all of its content preventing inside elements from getting click events?
Thank you.
Your event first fires on span and then also on button. You can prevent the event to be fired on parent by stopPropagation() method. Also, return false do the same.
Fiddle for demonstration
$('#span1').click(function(e){
$('#out').text('Span clicked');
e.stopPropagation();
});
or:
$('#span1').click(function(){
$('#out').text('Span clicked');
return false;
});
jSfiddle http://jsfiddle.net/kxntf/5/
Related
<div id="outerDiv" onclick="javascript:addEvent()">
<div id="inner">
<a class='editEV' href="javascript:void(0)">event1</a>//*added dynamically from addEvent method.*
</div>
</div>
My script is:
$('#inner').on('click','.editEV',function(){
editEvent();
});
When I click on anchor addEvent() called first then editEvent(), but I want that when I click on div then addEvent() should call and when I click anchor then editEvent.
I am aware about bubbling so that's why I introduce an inner static div to bind listener, but still addEvent() calls first. I am unable to figure out how can I force to call editEvent first.
You are using both - inline event set ( onclick=.. ) and Jquery on. Choose one of them to have more clear code. I would choose jquery on, and solution for this problem is to create two events - one on div, second on edit element, but in second We need to stop bubbling by using e.stopPropagation method. Here full working example:
$(function(){
$("#outerDiv").on("click",function(e){
console.log("Add click");
});
$("#outerDiv").on("click",".editEV",function(e){
console.log("Edit click");
e.stopPropagation();//very important to stop propagate event
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerDiv" style="padding:20px; background:grey;">
<div id="inner">
<a class='editEV' >event1</a>
</div>
</div>
Without stopPropagation our event is going up to div and runs its event, stopPropagation avoids propagate event to upper elements.
You also use this if you don't want to alter your code.
$(function(){
$("#outerDiv").on("click",function(e){
addEvent();
});
$("#outerDiv").on("click",".editEV",function(e){
editEvent();
e.stopPropagation();
});
});
e.stopPropagation();
use this.
If you want to read more on .stopPropagation(), look here.
I've got a div which has multiple elements nested. If I press on the div, the buttons appear in the same DIV. If I press on the button however, the buttons dissapear as well (this is because of a toggleClass on the div)
I've tried returning but that isn't working as well. See below for a JSFiddle
http://jsfiddle.net/p168uLv2/
$(document).on('click', "[data-link=level1]", function() {
console.log("li clicked");
$(this).find(".knoppenbalk").toggleClass("displaynone");
});
$(document).on('click', "[data-link=solo]", function() {
console.log("solo BUTTON clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-link="level1" class="limodeknop">
<div class="overlay"></div>
<div class="modeknop">
<div class="titel">
<lrmodenaam>Level 1</lrmodenaam>
<lrsubmode>Tutorial</lrsubmode>
</div>
<div class="knoppenbalk displaynone">
<div data-link="solo" class="solo btn">Solo</div>
</div>
</div>
</div>
This is made with jQuery, and I'm working with Framework7, but I don't think thats an issue.
You should stop the propagation of the events (calling bubbling). You can search tons of articles about it.
http://jsfiddle.net/p168uLv2/1/
$(document).on('click',"[data-link=solo]", function(e){
console.log("solo BUTTON clicked");
e.stopPropagation();
});
This only apply to the child element, to avoid the parent click propagation.
You can stop an event propagating to parent elements with use of:
event.stopPropagation();
You will want to accept event as an argument to your inline functions.
$(document).on('click',"[data-link=solo]", function(e){
e.stopImmediatePropagation();
console.log("solo BUTTON clicked");
})
;
JsFiddle
I am trying to dynamically add a div on clicking td.active. I wish to remove the dynamically added div when someone click on the close button or click on other td.active
Right now my code just append another div when the close button is clicked. can anyone help me to fix the issue.
$(function() {
$('td.active').click(function(event){
$(this).append('<div class="planner-modal"><div class="planner-modal-header"><button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h5 class="text-center">modal heading</h5></div><div class="planner-modal-body">modal body</div><div class="caret-container"><div class="top-caret"></div><div class="bottom-caret"></div></div></div>');
});
$('.planner-modal-header.close').click(function(e){
$(this).closest('planner-modal').remove();
});
});
I have gone through the jsfiddle and fixed it. you were trying to call click event on dynamically added content for ding this we can use jQuery on method.
i am sharing the jsfiddle link.
$(document).on("click",'.close',function(e){
$('.planner-modal').remove()
});
click here to see the working jsfiddle example
thanks
Use event delegation for dynamicaly created element
$('td.active').on("click", ".planner-modal-header .close", function (e) {
e.stopPropagation();
$(this).closest('.planner-modal').remove();
});
DEMO
use e.stopPropagation(); to stop the bubbling event
I want to style my div using jquery, i want to make it when i click the background become blue, when i unclick(i clicked on other part other than div in my page) the background become red. Sorry for my bad english
With a click handler on document you can capture all the click events, and if the click is not on your div, you can revert to red
$('#yourdiv').click(function() {
$(this).css('background-color', 'blue');
});
$(document).click(function(e) {
if(!$(e.target).is('#yourdiv'))
$('#yourdiv').css('background-color', 'red');
});
See example: http://jsbin.com/oyunin/1/edit
Im not sure about performace, but you can do something like:
$("*").not("your element selector").on("click",function(){
//other elements click
});
a good practice will be doing this:
$("*","some container").not......
if you want to change the div when you click on another div, you can add a click event on the other div, or perhaps you want to add the click event to the entire body of the document so that if a click event is not captured and stopped by another listener, it will go through to the body's event listener.
Try this,
Jquery Code:
$(document).mouseup(function (e){
var wrapDiv = $(".wrapper");
if(wrapDiv.has(e.target).length === 0){
wrapDiv.css('background-color','red');
}
$('.wrapper').click(function(event){
$('.wrapper').css('background-color','blue')
});
});
CSS code:
<style type="text/css">
.wrapper{
background-color:#0FF;
width:200px;
height:200px;
}
</style>
Html code:
<div class="wrapper">
</div>
The way I solved it in my site was adding a click event to the div in question, and another click event to the document in general. The method stopImmediatePropagation() makes it work as expected:
Here's a jsFiddle with a working example.
HTML:
<div class="colored"></div>
JQUERY:
$(document).click(function(e){
$(".active").removeClass("active");
});
$(".colored").live("click",function(e){
$(this).addClass("active");
e.stopImmediatePropagation();
});
CSS:
.colored{background:red}
.colored.active{background:blue}
I have a div that hides whenever you click outside of it but I'm having some trouble getting certain links inside the div to work (and not hide the div).
$(document).click(function() {
fav.hide();
});
theDiv.click(function(e) {
e.stopPropagation();
});
That is what I have for the whole clicking outside and closing event. Heres the thing: I have two types of links in my div, one regular link and another which is a javascript one. The regular one redirects OK but the javascript one doesn't do anything.
Could somebody help me out? Thanks.
EDIT:
Here are the bits of my code that might help out
var fav = $('#favorites');
// Open & close button
$('#favorites_a').click(function(e) {
e.stopPropagation();
e.preventDefault();
fav.toggle();
});
$('a.c',fav).live('click', function(e) {
alert('hey');
});
$(document).click(function() {
fav.hide();
});
fav.click(function(e) {
e.stopPropagation();
});
HTML (built after page load):
<div id="favorites">
<div class="wrap">
<ul><li>AB</li></ul>
</div>
</div>
This could be a problem with the live() click event handler. When you use live the event handler is actually attached to the document. So the event needs to bubble up to the document, but your click event handler on fav prevents bubbling up.
It works with delegate though:
fav.delegate('a.c', 'click', function(e) {
alert('hey');
});
Here, the event handler is added to fav.
DEMO
I think your code for fav is preventing the 'B' link from working. Instead of .live(), try:
$('a.c').click(function() { ... });
instead.