Develop Reference

How can call the jquery function onclick only parent element [duplicate]

This question already has answers here:
How to stop events bubbling in jQuery? [duplicate]
(5 answers)
Closed 7 years ago.
I am trying to call a jQuery function when clicked only on parent element.
<div id="clcbox" class="click-img">
<img id="fire" onclick="createFirework()" src="img/clicker.png" />
</div>
I have an img tag inside a div. When I click on the div it should call one function and when I click on the img I want to call another function. How can I do this?
$('.click-img, .wishes').click(function () {
$('.flipWrapper').find('.card').toggleClass('flipped');
return false;
});
When I click the div I should call the above function. However now when I click on the image, it is also calling this function and createFirework().

The issue is due to event bubbling. If you attach your events in an unobtrusive manner you can easily stop this behaviour.
<div id="clcbox" class="click-img">
<img id="fire" src="img/clicker.png" />
</div>
$('#fire').click(function(e) {
e.stopPropagation();
createFirework();
});
$('.click-img, .wishes').click(function (e) {
$('.flipWrapper').find('.card').toggleClass('flipped');
e.preventDefault();
});

First off, don't mix inline (onclick) event handlers and jQuery event handlers. Once, you've got a jQuery event handler in place of your createFirework method, you simply stopPropagation to stop it calling the handler on the outer div.
Below is an example
$('.outer').click(function(e){
alert("You clicked text in the div");
});
$('.inner').click(function(e){
alert("You clicked the button, but the div event handler will not fire");
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<span>here is some text inside the div, click it</span>
<button class="inner">Click me</button>
</div>

You need to use stopPropagation function:
http://www.w3schools.com/jquery/event_stoppropagation.asp
In your case you need to add this on image click event:
$('.click-img, .wishes').click(function (event) {
event.stopPropagation();
$('.flipWrapper').find('.card').toggleClass('flipped');
return false;
});

It looks like you need to stop the click event from the image bubbling up the DOM chain.
$('.click-img, .wishes').click(function (e) {
$('.flipWrapper').find('.card').toggleClass('flipped');
e.stopPropagation();
});
When you click on the image, that event is passed up to it's parent, in this case the <div>. That is by behavior. To stop that from ocurring, you call the stopPropagation() function that is part of the incoming event argument for the click event.

You can use Event.stopPropagation(), to stop the click event bubble to its parents, but you also need to add a param event, so your function can access it without browser issue.
// VVVV pass `event` as createFirework's param.
<img id="fire" onclick="createFirework(event)" src="http://placehold.it/50x50" />
But I'd suggest that answers that separate js part and html part would be better. Just like Jamiec's.
function createFirework(event) {
console.log('inner');
event.stopPropagation();
}
$('.click-img, .wishes').click(function () {
console.log('outer');
return false;
});
#clcbox {
width: 100px;
height: 100px;
border: solid 1px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clcbox" class="click-img">
<img id="fire" onclick="createFirework(event)" src="http://placehold.it/50x50" />
</div>

HTML Javascript Physical click triggers event but logical click doesn't

I've got this button:
<button class="dijitStretch dijitButtonNode dijitButtonContents dijitButton jStopThreads dijitButton" dojoattachevent="onclick:_onButtonClick,onmouseenter:_onMouse,onmouseover:_onMouse,onmouseout:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse" dojoattachpoint="focusNode,titleNode" type="button" wairole="button" waistate="labelledby-jStopThreads_label" role="button" aria-labelledby="jStopThreads_label" id="jStopThreads" tabindex="0" widgetid="jStopThreads" aria-valuenow="" aria-disabled="false" style="position: absolute; left: 76px; top: 528px; z-index: 3; width: 104px; height: 20px;"><span class="dijitInline " dojoattachpoint="iconNode"><span class="dijitToggleButtonIconChar">✓</span></span><span class="dijitButtonText" id="jStopThreads_label" dojoattachpoint="containerNode">
When I physically click on that button, the desired event triggers right, but It doesn't when I do using jQuery this way:
$('.jStopThreads').trigger("click");
or
$('.jStopThreads').click();
The button clicks because it focuses, but the event associated isn't triggered? How is this possible???

That's because jQuery can only trigger events, which were added via jQuery.
So, if you would add the event via jQuery like this:
$('.jStopThreads').click(function() {
// the content of your function
});
It could later be called via the jQuery functions trigger() or click()

It looks like you're using a library, Dojo, to attach your click event. Do it in jQuery:
function clickHandler(e) {
alert('clicked!');
}
$('.jStopThreads').on('click', clickHandler);
$('.jStopThreads').trigger("click");
http://jsfiddle.net/

Jquery click function not working (displaying a hidden section)

I am trying to create a popup section that contains a form for someone to enter their email address when someone clicks on a link that says 'Mailing List.' The trouble is that when I click the link, the section doesn't appear. It works when I set it to hover but not click. I've run out of ideas on how to debug this. What am I missing?
HTML
<form class="mailing-list-input pull-right">
<input type="text" placeholder="Email Address" class="mailing-list-input">
<button class="mailing-list-btn">
<img src="/assets/arrow.png" style="height: 12px; width: 12px; margin-right: 6px;">
</button>
</form>
<footer class="footer footer-style">
<section class="container pull-right">
<ul class="list-inline btm-list">
<li class="btm-menu-width">
<a href="/" class="btm-menu-heading mailing-list">
Mailing List
</a>
</li>
</ul>
</section>
</footer>
CSS for .mailing-list-input
.mailing-list-input {
margin-right: 10rem;
display: none;
z-index: 98;
position: fixed;
bottom: 5rem;
right: 0;
}
Jquery File
$(document).ready(function() {
$(".mailing-list").click(function() {
$(".mailing-list-input").css('display', 'block');
},
function() {
$(".mailing-list-input").css('display', 'none')
})
})

The click function only accepts a single handler function. To achieve the behaviour you want, use a single handler and toggle() the element. Try this:
$(".mailing-list").click(function(e) {
e.preventDefault();
$(".mailing-list-input").toggle();
});
Example fiddle
Note I also added preventDefault() to stop the default link behaviour.

Based on what the OP appears to be trying to do this should be the Javascript:
$(".mailing-list").click(function(e) {
e.preventDefault();
if ($(".mailing-list-input").css('display') === 'block') {
$(".mailing-list-input").css('display', 'none');
} else {
$(".mailing-list-input").css('display', 'block');
}
});
The click handler callback takes an argument that is the event object, you can call preventDefault on that object to stop the event from continuing through its lifecycle. Then if you want the link to toggle the element on every click you check to see if the element is visible or not and set its value accordingly.
Here is a working fiddle

jQuery binding events to elements with dynamic class

I have a trigger element and a responding element.
<div class="more"></div>
<div class="info"></div>
I would like to bind an open/close type event.
$('.more').delegate($('.more'), 'click', function(){
$(this).removeClass('more');
$(this).addClass('less');
$(this).text("less...");
$('.info').addClass("open");
});
$('.less').delegate($('.less'), 'click', function(){
$(this).addClass('more');
$(this).removeClass('less');
$(this).text("more...");
$('.info').removeClass("open");
});
It doesn't work as intended, if the second function is nested in the first then you can open and close only once.
If the script is formatted sensibly as above it will open but not close.
Could anyone help me out?
Bonus if the script could support the .info could be either a sibling or the element immediately following $(.more/.less)'s parent.
I've been toying with .on/.live/.bind but less successfully than above.

Use event delegation ,and binded to document or immediate parent,not same element
$(document).on( 'click',".more", function(){
$(this).removeClass('more');
$(this).addClass('less');
$(this).text("less...");
$('.info').addClass("open");
});
$(document).on('click',".less", function(){
$(this).addClass('more');
$(this).removeClass('less');
$(this).text("more...");
$('.info').removeClass("open");
});
DEMO
NOTE: delegate was outdated with latest version of jquery ,so use on instead,
ISSUE: you are delegated with same element $('.less'),$('.more') use immediate parent or document

Just use JavaScript to toggle a class, and let CSS magic do the rest. Here is a demo: http://jsfiddle.net/pomeh/69sX5/1/
And here is the code:
HTML
<div>
Some visible content
</div>
<div class="content-fold">
<div class="more">More...</div>
<div class="less">Less...</div>
</div>
<div class="info">Some hidden additional content</div>
CSS
/* Additional content and Less button hidden by default */
.content-fold + .info, .content-fold .less {
display: none;
}
/* Additional content and Less button shown when class shown is active */
.content-fold.shown + .info, .content-fold.shown .less {
display: block;
}
/* More button hidden when additional content is shown */
.content-fold.shown .more {
display: none;
}
/*
You can also move the "div.info" into the "div.content-fold",
and use ".content-fold.shown > .info" instead of ".content-fold.shown + .info"
Browser support is quite good for adjacent selector (see http://www.quirksmode.org/css/selectors/#t11 and https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors#Browser_compatibility)
*/
JavaScript
$('.content-fold').on('click', function(){
$(this).toggleClass('shown');
});

Use id to do your task. it's easy.
Html
<div class="more" id="toggle"></div>
<div class="info"></div>
Jquery
$('#toggle').click(function(){
var $this = $(this) //store object
if($this.hasClass('more')) {
$this.removeClass('more').addClass('less').text('Less...')
$this.next('.info').addClass('open');
} else {
$this.removeClass('less').addClass('more').text('More...')
$this.next('.info').removeClass('open');
}
});
js Fiddle: http://jsfiddle.net/5N6TL/53/

onblur() is not working while onclick() is working fine

I need to make the notification list appear on the click which is working fine. But onblur() is not working at all.
Here is the fiddle: http://jsfiddle.net/eX2zQ/
Code:
html:-
<div class="one" onclick="hidetwo();" onblur="remove_the_notification();">
<div>
<ul class="dropdown" id="notification" >
<li>kjhlkjhkjhklhjklj</li>
<li>kjhlkjhkjhklhjklj</li>
<li>kjhlkjhkjhklhjklj</li>
<li>See_All</li>
</ul>
</div>
</div>
css:-
.one{
overflow: visible;
width: 21px;
height: 21px;
background-color:black;
}
js:-
var show=0;
function hidetwo(){
if (show==0){
document.getElementById('notification').style.display="block";
show=1;
}
else if (show==1){
document.getElementById('notification').style.display="none";
show=0;
}
}
function remove_the_notification(){
alert('hide one');
if (show==0){
document.getElementById('notification').style.display="block";
show=1;
}
else if (show==1){
document.getElementById('notification').style.display="none";
show=0;
}
}

You have onLoad selected in the JSFiddle options. That means that your functions are hoisted after everything on the page is loaded, and so their references aren't available at the time that the handlers are attached. Also, AFAIK, without contenteditable your can't 'blur' a <div> - this event is usually for form elements like inputs. Perhaps you meant onmouseleave?
<div class="one" onclick="hidetwo();" onmouseleave="remove_the_notification();">
JSFiddle

Use onmouseout for this. This will trigger when the mouse is going outside the div.
W3Schools onmouseout

onBlur() event will work with input element like text,file . it will not working on div,so please try onmouseLeave(),onmouseout()
<div class="one" onclick="hidetwo();" onmouseout="remove_the_notification();">

To make onblur event worked on DIV element you need to add tabindex attribute for DIV. For example:
<div class="one" onclick="hidetwo();"
tabindex="0" onblur="remove_the_notification();">
...
</div>