I have 3 nested divs..
<div onclick="highlight(this)">1
<div onclick="highlight(this)">2
<div onclick="highlight(this)">3
</div>
</div>
</div>
To stop event-bubbling, I want add a syntax to the divs - stopPropagation().
I've tried (for first div only here)
document.querySelectorAll("div")[0].setAttribute("onclick", "event.stopPropagation()");
But it's not working. What is the solution/alternative to this..??
I want the divs to be like..
<div onclick="highlight(this) event.stopPropagation()">1
As you need to stop propagation of event, it seems to make sense that the corresponding action is attached to event itself. Here's one possible way of using it:
HTML
<div id="outer" onclick="highlight(event, this)">
<div id="middle" onclick="highlight(event, this)">
<div id="inner" onclick="highlight(event, this)">
</div>
</div>
</div>
JS
function highlight(event, target) {
event.stopPropagation();
console.log( target.id + ' is clicked' );
}
Demo.
Related
I have some nested <div>s where I want to call a function on click of one of the nested <div>, however I am not able to achieve it.
Here is my HTML :
<div class="seat available">
<div id="2020" class="seat-click"></div>
<div class="tootltip-text">
<p>Name : <span id="id31">Subham<span><button>Ok</button></span></span></p>
<p>Seat No :<span id="13-tooltip-count">111</span></p>
<p>Team :<span id="id32">Abc</span></p>
</div>
</div>
Here is my jQuery :
$('.seat-click').on('click', function () {
console.log('Hello');
});
For clear understanding, refer to https://jsfiddle.net/47s8q2pv/4/
Here, I want the click function to be called only when I click <div id="2020" class="seat-click"></div>.
This can be achieved if I change the jQuery to
$('.seat-click').on('click', function () {
console.log('Hello');
});
If I do so, then my <div class="tootltip-text"> will also call the same click function, which I don't want because I will have some buttons and clickable items inside the tooltip in future.
Is there any workaround for this?
Thanks in advance.
As #entiendoNull said, your seat-click element is of height 0.
You can either set the height of that element or write the click event handler on the seat element instead using:
$('.seat').on('click', function () {
console.log('Hello');
});
The div you're using are not displayed in the browser as <div id="2020" class="seat-click"></div> doesn't have any width or height.
I don't understand what you want for this case, but if you want to make the button where the tooltip appears able to be clicked, maybe this is right for you
<div class="seat available">
<div id="2020" class="seat-click">
<div class="tootltip-text">
<p>Name : <span id="id31">Subham<span><button>Ok</button></span></span></p>
<p>Seat No :<span id="13-tooltip-count">111</span></p>
<p>Team :<span id="id32">Abc</span></p>
</div>
</div>
</div>
How to delete div with jQuery that is dynamically created with unique id?
i am trying to use below code but it is not working.
HTML CODE
<div class="div-roomcart" id="divOAK1AKL">
<div class="div-roomcart-hotel">
<div class="div-roomcart-hotelname">Eden Park Bed And Breakfast</div>
<div class="div-roomcart-roomtype">Single Standard</div>
</div>
<div class="div-roomcart-room">
<div class="div-roomcart-roomprice">14058.26</div>
<div class="div-roomcart-roomaction">
<input type="submit" id="submit" value="Remove" class="btnbook" onclick="removeroom(divOAK1AKL)">
</div>
</div>
there will be multiple of div which i have to delete on onclick="removeroom(code)" this is a jQuery function below is the jQuery Code
jQuery Code in removeroom.js
function removeroom(hotelcode){
$("'#"+hotelcode"'").remove();
}
There is no need to wrap the selector once again with single quotes,
function removeroom(hotelcode){
$("#" + hotelcode).remove();
}
That will make the selector invalid. Also you can use an dedicated event handler for it rather than using an inline event handler. Inline event handler has more disadvantages, and the most important one from that is maintenance.
try this one
function removeroom(hotelcode){
$("#" + hotelcode).remove();
}
or
just pass the perameter with selector
like
removeroom("#hotelcode"); // calling function hare.
function removeroom(hotelcode){
$(hotelcode).remove();
}
without Jquery,
function removeroom(hotelCode) {
typeof hotelCode == 'object' ? hotelCode.remove() : document.getElementById(hotelCode.toString()).remove();
}
<div class="div-roomcart" id="divOAK1AKL">
<div class="div-roomcart-hotel">
<div class="div-roomcart-hotelname">Eden Park Bed And Breakfast</div>
<div class="div-roomcart-roomtype">Single Standard</div>
</div>
<div class="div-roomcart-room">
<div class="div-roomcart-roomprice">14058.26</div>
<div class="div-roomcart-roomaction">
<input type="submit" id="submit" value="Remove" class="btnbook" onclick="removeroom('divOAK1AKL')">
</div>
</div>
Hope this helps..:)
What is the proper way to re-apply jquery to objects which are cloned??
I have an example I rigged up in jsfiddle here: http://jsfiddle.net/49o6arLu/16/
<div class="hidden element-holder">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
</div>
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
<div class="clear"></div>
<div class="add-element">Add Element</div>
$('div.button').click(function(event) {
if($(this).parent().children('.green-square').is(':visible')) {
$(this).parent().children('.green-square').hide();
}else{
$(this).parent().children('.green-square').show();
}
});
$('div.add-element').click(function(event) {
$('div.element-holder').children('div').clone().insertAfter($('div.element-holder'));
});
As you can see, the initial displayed box and button work just fine. However, When you add another element the new element button does not work anymore.
I understand why I have this problem, however I don't know the proper way I should go about re-applying the Jquery to the new elements which are cloned.
Can someone provide a solution to the jquery and provide some explanation as to what you did?
Thanks!
You can save the need to re-apply the handler to all the appended elements by having a single delegated click handler on a common parent element.
First of all amend your HTML to include the container, in this case #element-container:
<div class="hidden element-holder">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
</div>
<div id="element-container">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
<div class="clear"></div>
</div>
<div class="add-element">Add Element</div>
Then you can amend the Add Element button to append to that container:
$('div.add-element').click(function (event) {
$('div.element-holder').children('div').clone().appendTo('#element-container');
});
Finally you can add the delegated event handler to the new #element-container. Note that I also shortened the logic using toggle() and siblings():
$('#element-container').on('click', 'div.button', function (event) {
$(this).siblings('.green-square').toggle()
});
Example fiddle
In order to copy event handlers you should send true in the clone method:
$('div.add-element').click(function(event) {
$('div.element-holder').children('div').clone(true).insertAfter($('div.element-holder'));});
I'm newbie in Jquery, how to make a function but select different div (Like php class)?
This is my code:
$(document).ready(function(){
$("#box-1").hover(function(){
$("#mebox-1").removeClass("hide");
$("#circle-1").addClass("hide");
});
$("#box-1").mouseleave(function(){
$("#mebox-1").addClass("hide");
$("#circle-1").removeClass("hide");
});
});
And I want to use this function for box-xxx. This is my HTML cod sample:
<div id="box-1" class="box">
<div id="circle-1" class="circle"></div>
<div id="mebox-1" class="hide circle-bg">
test
</div>
</div>
<div id="box-2" class="box">
<div id="circle-2" class="circle"></div>
<div id="mebox-2" class="hide circle-bg">
test
</div>
</div>
<div id="box-3" class="box">
<div id="circle-3" class="circle"></div>
<div id="mebox-3" class="hide circle-bg">
test
</div>
</div>
Try to use that common classes attached with those elements, And most importantly use the this reference so that we can target the elements inside the element over which we are moving.
$(".box").hover(function(){
$(".circle-bg",this).removeClass("hide");
$(".circle",this).addClass("hide");
},function(){
$(".circle-bg",this).addClass("hide");
$(".circle",this).removeClass("hide");
});
DEMO
As you have already defined common classes. You should use .find() to get the descendants.
Use
$(".box").hover(function(){
$(this).find(".circle-bg").removeClass("hide");
$(this).(".circle").addClass("hide");
},function(){
$(this).find(".circle-bg").addClass("hide");
$(this).find(".circle").removeClass("hide");
});
Also I have passed the mouseleave event handler as second argument to .hover() function.
Try with this:
var n="";
$('[id^="box-"]').hover(function(){
n = this.id.split('-')[1];
$("#mebox-"+n).removeClass("hide");
$("#circle-"+n).addClass("hide");
},function(){
$("#mebox-"+n).addClass("hide");
$("#circle-"+n).removeClass("hide");
});
fiddle
I have a div setup like so:
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
I have the following code:
$('.show-comments').click(function(e){
e.preventDefault();
$('.comments-wrapper').slideToggle('slow');
});
As you would assume, the code works but on a class basis. I'd like for it to open up only the .comments-wrapper of its associated id (i.e. open slideToggle comments2 if content 2 button is clicked and so on and so on).
How would I do this?
$('.show-comments').click(function(e){
e.preventDefault();
$(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});
Note that this is dependent on the .content element being immediately followed by the .comments-wrapper.
If you have access to modify the html itself, I would suggest adding a wrapper element and then doing the following to avoid the reliance on the exact order of elements:
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
</div>
$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');
This way, if you add an element between the .content and the .comments-wrapper it does not break the code.
You can do this:
$(this).parent("div").next('.comments-wrapper').slideToggle('slow');
This will find the related div of class .comments-wrapper and slide toggle.
And a fiddle: http://jsfiddle.net/xCJQB/
$('.show-comments').click(function (e) {
e.preventDefault();
var num = this.id.match(/\d+$/)[0];
$("#comment" + num).slideToggle('slow');
});
Demo ---> http://jsfiddle.net/7pkyk/1/
Use this context
$(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');
If it is not the immediate element then you might try this as well
$(this).closest('.comments')
.nextAll('.comments-wrapper').first().slideToggle('slow');
you can add a common class to associate a button with a div.
html:
<div class="content">
<button class="show-comments group1" id="content1"></button>
</div>
<div class="comments-wrapper group1" id="comment1">1</div>
<div class="content">
<button class="show-comments group2" id="content2"></button>
</div>
<div class="comments-wrapper group2" id="comment2">2</div>
javascript:
$('.show-comments').click(function(e){
var associate = $(this).attr('class').match(/group\d+/).pop();
var selector = '.comments-wrapper.' + associate;
e.preventDefault();
$(selector).slideToggle('slow');
});
http://jsfiddle.net/uMNfJ/