I have the following html:
<ul class="treeList2">
<li class="topLevel marked checked"><div class="tlWrap clearfix"><input type="checkbox" checked="checked" class="checkbox"><strong>Level name here blah blah <span>(3)</span></strong></div></li>
...
<script type="text/javascript">
/*<![CDATA[*/
$(function(){
$('.treeList2 li.topLevel .tlWrap').click(function(){
alert(this);
});
});
/*]]>*/
</script>
The problem is that this fires when I click the checkbox (which i don't want). I Only want to alert(this) when the 'div' is clicked (I do this so that I can change the div background).
thanks
You can prevent the click event on the checkbox from bubbling up to the parent like this:
$('.checkbox').click(function(e){
e.stopPropagation();
});
You can try it here.
See http://api.jquery.com/event.stopPropagation/
check if the target is not input element and then only alert.
$(function(){
$('.treeList2 li.topLevel .tlWrap').click(function(e){
if (e.target.nodeName !== 'INPUT') {
alert(this);
}
});
});
Looking at it, you need to call the parent?
$('.treeList2 li.topLevel .tlWrap').parent().click( ...
Although if you want to change the parent div when the checkbox is clicked:
$('.treeList2 li.topLevel .tlWrap').click(function(){
$(this).parent().css('background-color','red');
});
[edit]
Sorry, I mis-read the html.
There's a 'not' function that you can exclude elements with:
$('.treeList2 li.topLevel .tlWrap').not('input').click( ...
This will fire when anything in the div is clicked on, except the checkbox.
You can check whether the element that triggered the event (e.target) has a class of tlWrap.
$(function(){
$('.treeList2 li.topLevel .tlWrap').click(function(e){
if($(e.target).hasClass("tlWrap")) {
alert(this);
}
});
});
See a working demo.
Related
In the following code:
// submit an item
$(document).on("click", ".match-item", function(event) {
// how to set $(this) == $('.match-item') clicked?
});
I'm looking to retrieve $(this) as the clicked item and not the document itself. How would I do this?
This is more of clarification rather than answer.
this is already referring to the currently clicked element.
$(document).on("click", ".match-item", function(event) {
console.log($(this).attr('class'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
Parent
<div class="match-item">----Click Me</div>
</div>
How about
$('.match-item').click(function() {
//your code with $(this) here
});
I am pretty sure $(this) will refer to the element with class match-item
I've looked through stackoverflow for days, and none of the stuff I worked. Anyways, after an explosion and appending a submit button to my document the button doesn't alert when clicked.
$(document).ready(function() {
alert('hi');
$("#a").click(function() {
$(".main, .topbar, button").toggle("explode");
$('body').delay(8100).append("<img src='picture.png'> <form > <input type='text'></form><button id='submit'>submit</button>");
});
$("#submit").click(function() {
alert('hi');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='a'>button</button>
Any suggestions?
You are binding click to submit before submit is even added to htmlDOM. To do it that way you have to first add submit to htmlDOM and then bind the event handler.
But, for such dynamic elements you can use jQuery on function and delegate from any parent element. It is not recommended to delegate from body, you can delegate from nearest parent that is present during document.ready event.
$(document).ready(function() {
alert('hi');
$("#a").click(function() {
$(".main, .topbar, button").toggle("explode");
$('body').delay(8100).append("<img src='picture.png'> <form > <input type='text'></form><button id='submit'>submit</button>");
});
$("body").on('click','#submit',function() {
alert('hi');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='a'>button</button>
I'm not 100% if I understood what you're trying to do there but check if this works:
<script>
$(document).ready(function () {
alert('hi')
$("#a").click(function () {
$(".main, .topbar, button").toggle("explode");
$('body').delay(8100).append("<img src='img.png'> <form > <input type='text'><button id='submit'>submit</button></form>");
});
$("#submit").click(function () {
alert('hi');
});
});
</script>
I assume you are inserting the button after page load, but calling the click handler before the element is on the page. Therefore jQuery can't find your element.
If you want to assign your click handler on page load, that's fine. Just assign your click handler to any parent element that is on the page when the page loads, like <body> and then using the jQuery .on() method to specify a descendant selector like so :
$('body').on('click', '#submit', function(){ alert('hi'); });
I'm trying to bind an event for any child within any children in a div except for a specified child with the following:
$(document).ready(function(){
$("#holder").find('*').each(function(){
if($(this).context.nodeName !== "SPAN"){
$(this).click(function(){
window.console.log('s');
});
}
});
});
However, because the SPAN is within an element, the click event is still being called. Is there any way around this?
I have a demo on JSBin
Add an else condition to negate the click if it is a span
if($(this).context.nodeName !== "SPAN"){
$(this).click(function(){
window.console.log('s');
});
}
else {
$(this).click(function(e){
e.stopPropagation(); // negate click
});
}
Try this:
$(document).ready(function(){
$("#holder").find('*').on('click', function(e){
if($(e.target).is('span')){
return;
}else{
console.log('s');
}
});
});
Demo
Here we are finding all elements in #holder and binding the click event on every node except the span.
You put a click handler on all the p blocks. The span is in one of the p blocks. It gets the click event, but does nothing with it, it then bubbles up to the p.
You need to put a click handler on the span and then have it swallow the event. By calling event.stopPropagation().
http://api.jquery.com/event.stoppropagation/
What you encountered is known as Event Bubble. The children's event will be bubbled up to container when it is triggered, To read more about it . Please read What is event bubble?
What is the event.stopPropagation used for?
Hope it is helpful.
you can write this code to stop propagating the event to the next level when span is clicked:
$("#holder span").click(function(event,v){
event.stopPropagation();
});
Can you please try this:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<meta charset="utf-8">
<script type="text/javascript">
$(document).ready(function(){
$("#holder").find('*').each(function(){
if($(this).context.nodeName != 'SPAN')
{
$(this).click(function(e){
window.console.log('s');
});
}
else
{
$(this).click(function(e){
e.stopPropagation();
});
}
});
});
</script>
<title>JS Bin</title>
</head>
<body>
<div id="holder">
<p>some text</p>
<p>might say</p>
<p>that being</p>
<p>in <span annid="1" style="font-weight:bold">space</span></p>
<p>is like</p>
<p>communicating with</p>
<p>dead pixels</p>
</div>
</body>
</html>
The problem in your code is beacuse of event propagation , the click event is propagating from the <p> event . This is beacuse , the span is inside the <p> element
Hope this helps..
You can use:
$("#holder").find("*:not(span)").on('click', function() { ... });
You can check the type of event source and skip the event handler code when event source is span.
Live Demo
$(document).ready(function(){
$("#holder *").click(function(event){
if(event.target.tagName == 'SPAN') return;
window.console.log('s');
});
});
I am sorry that I have asked two questions in a few minutes.
In a html file, I got three child DIV tags in a parent DIV tag:
<div id="container">
<div id="frag-123">123</div>
<div id="frag-124">124</div>
<div id="frag-125">125</div>
</div>
Now when I click either the three child DIV tags, I will see two alert boxes pop up instead of one:
The first alert box will show something like this:
frag-123, and the second alert box will show something like this:
container
I dont know why.
I just want to get the ID value of a child DIV, not the one from the parent DIV.
<script>
$(function() {
$("div").click(function() {
var imgID = this.id;
alert(imgID);
});
});
</script>
Please help.
This is a case of event bubbling. You can stop event bubbling by giving
e.stopPropagation()
inside the click event handler.
Try
$(function() {
$("div").click(function(e) {
var imgID = this.id;
alert(imgID);
e.stopPropagation() // will prevent event bubbling
});
});
If you want to bind click event to only child elemets inside the container div then you can give like this
$("#container div").click(function(){
var imgID = this.id;
alert(imgID);
});
That's because you're binding the event handler to all DIVs. Instead, what you want is bind it only to DIVs within container:
<script type="text/javascript">
$(function() {
$("#container div").click(function() {
var imgID = this.id;
alert(imgID);
});
});
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#myDiv').click(function() {
var checkBox = $(this).children("input[type='checkbox']");
checkBox.attr('checked', !checkBox.attr('checked'))
});
});
</script>
<div id="myDiv" style="background-color:red;height:50px;width:50px;">
<input type="checkbox" />
</div>
I'm having problems making the div clickable so that it checks the nested checkbox. I would like to make it so this function works only if the mouse is not hovering the checkbox. How can I do this? Something like this:
if (!checkBox.isHover)
checkBox.attr('checked', !checkBox.attr('checked'))
Note this question has been asked here before, but the answers did not seem to solve the problem. The wrapped label solution does not work properly in FireFox. Thank you.
Try this:
$('#myDiv').click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
evt.stopPropagation();
return false;
}
});
Untested, but I just successfully used something along these lines on a project.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#myDiv').click(function(e) {
e.stopPropagation();
var checkBox = $(this).children("input[type='checkbox']");
checkBox.attr('checked', !checkBox.attr('checked'))
});
});
</script>
The issue is that if you actually click on the checkbox it will still trigger the click event on the div - event bubbling. You can add a click event to the checkbox which stops the bubbling, this way only the div binds to the event.