I have the following HTML code
<div id="id0_0" class="clearfix" style="margin-left:40px">
<div id="id0_1" class="choice">
<span id="spanradio_1" class="radio"> </span>
<span id="spanlabel_1" class="label"><label id="label_1">Indoor</label></span>
</div>
<div id="id0_2" class="choice">
<span id="spanradio_2" class="radio"> </span>
<span id="spanlabel_2" class="label"><label id="label_2">Outdoor</label></span>
</div>
</div>
with the following jQuery:
jQuery('.choice').click( function(e) {
alert('clicked!! ' + e.target.id);
var src_ele = $(e.target);
e.stopPropagation();
return false;
});
However, my click is triggering on the spanradio's & label's and not the div's. Any reason what is causing this?
Thanks!
Basically:
this is the element you bound the event to (i.e. one of the elements in the set that you called .on on)
e.target is the deepest element you clicked on
So you want this.id.
e.target is the element that the user actually clicked on.
If the user clicked on a nested element, e.target will be that element.
because the label is the ONLY content in a ".choice"-element and therefore is on the TOP --> it's actually the element, you clicked on...
check out event.relatedTarget if this is the right one for you.
Related
I have a navigational menu now how can i add a selected class after click to any of my spans and remove selected class from previous span using Jquery.
<div class="large-12 columns TSCSlot">
<div class="large-10 columns DayRow">
<div class="large-12 columns left DaySelected">
<span class="Selected"></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
</div>
</div>
$('div.large-12.columns.left.DaySelected > span').click(function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
$(this).closest('span').find('.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
span.Selected {
background-color: #5e9e37 !important;
color: white !Important;
}
Can anyone point me to what I'm doing wrong?
The target of your click is the span, so closest('span') will find itself, so your following find('.selected') will not find the "selected" element:
Try this instead: http://jsfiddle.net/TrueBlueAussie/6pg5as4n/
$(this).closest('.DaySelected').find('.selected').removeClass('selected');
$(this).addClass('selected');
Html:
<div class="large-12 columns TSCSlot">
<div class="large-10 columns DayRow">
<div class="large-12 columns left DaySelected">
<span class="selected"></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
</div>
</div>
Notes:
Using closest with .DaySelected will ensure you do not modify other controls on the page. Your could also just use parent() e.g. $(this).parent().find('.selected').removeClass('selected')
The second line then just adds the selected class to the clicked span.
You have an uppercase S on selected in the html. Have changed that to lowercase s to match the code.
You do not appear to need to prevent propagation and spans have no default operation to prevent. e.g. http://jsfiddle.net/TrueBlueAussie/6pg5as4n/1/
Instead of e.preventDefault() and e.stopPropagation you can simply return false to do both. e.g. http://jsfiddle.net/TrueBlueAussie/6pg5as4n/2/
As You telling in post. You are clicking the current span You can add selected class ,remaining selected class are removed
$('div.large-12.columns.left.DaySelected > span').click(function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
$('.Selected').removeClass('Selected');
$(this).addClass('Selected');
});
NOTE :in css Selected not selected class
DEMO
Some small improvements:
<span class="Selected"</span> should be <span class="selected"></span>
(small beginning character for classes and > added)
$('div.large-12.columns.left.DaySelected > span').click(function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
$(this).parent().find('.selected').removeClass('selected'); //removes all selected classes in this div
$(this).addClass('selected');
});
Your click is binded on the <span>. So if you use jQuery(this) it is actually the span you want to change. So you dont need .parent() .find() or anything else to add the class to it.
I think your DOM select is wrong.
$('div.large-12.columns.left.DaySelected > span')
should be
$('div.large-12.columns .left.DaySelected > span')
I am trying to figure out what button a user has clicked inside a DIV container, but I must be doing something wrong here. I keep getting a no attributes error. Can anyone tell me if I am doing something wrong? Here is my JS:
// Bind ButtonClicks
$('#jplayers .button').on("click",function(e){
alert("Class :" + e.attr("class"));
// Determin what button
if( e.attr("class").indexOf("play") > 0 ){
// Play Clicked
player.jPlayer("play");
}else{
// Pause Clicked
player.jPlayer("pause");
}
});
Here is my HTML:
<div id="jplayers">
<!--First Player-->
<div id="zen_1">
<span class="player"></span>
<span class="circle"></span>
<span class="progress"></span>
<span class="buffer"></span>
<span class="drag"></span>
<div class="button">
<span class="icon play"></span>
<span class="icon pause"></span>
</div>
</div>
<!--Second Player-->
<div id="zen_2">
<span class="player"></span>
<span class="circle"></span>
<span class="progress"></span>
<span class="buffer"></span>
<span class="drag"></span>
<div class="button">
<span class="icon play"></span>
<span class="icon pause"></span>
</div>
</div>
</div>
Thanks for any help
You can get the class by using this.
$(this).attr("class")
The e that you're using isn't the element but the click event.
$('#jplayers .button').on("click",function(e){
alert("Class :" + $(this).attr("class"));
});
Here in your case you can make use of the e parameter in the callback method in the click event.
e.target returns the respective element this being clicked by the user.
$('#jplayers').on("click", function (e) {
// using this you can access the specific element
var className = $(e.target).prop('class');
if (className.indexOf("play") !== -1 || className.indexOf('pause') !== -1) {
alert(className);
// you can access it using $(e.target)
}
});
JSFiddle (with a simple sample code)
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.
I've got a function that, when you click in a textarea, it will slide down a button.
However, I have multiple textareas on the page with the same class and the problem is that if you click on any of the textareas, all of them will slide down the button.
How can I make it so that it only slides down on the textarea element that you click on, and not the others?
Here's a quick JSFiddle I made: http://jsfiddle.net/MgcDU/6100/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
JavaScript:
$("textarea").click(function(){
$(".btn-toggle").slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(".btn-toggle").slideUp();
}
});
Have to find the elements relative to the element that was clicked.
$(this) is the element that was clicked, and siblings() finds elements that are siblings.
http://jsfiddle.net/P9nMq/
$("textarea").click(function(){
$(this).siblings('.btn-toggle').slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(this).find('.btn-toggle').slideUp();
}
});
How about instead of relying on a class lookup, use the event target:
$("textarea").click(function(evtTarget){
$(evtTarget.target).parent().find($(".btn-toggle")).slideDown();
});
http://jsfiddle.net/paulprogrammer/MgcDU/6103/
The following snippet selects all the buttons:
$(".btn-toggle").slideUp();
You should replace it with this:
$(this).siblings(".btn-toggle").slideUp();
Update
I would rewrite your script with these lines :
$(".well").('focus blur', "textarea", function(e){
$(this)
.siblings(".btn-toggle")
.stop(true, true)
.slideToggle();
});
The advantage is that you delegate the events on the same parent of the two targeted elements and that you do not rely on any click event handlers.
I have the following markup. I would like to add class_A to <p class="subitem-text"> (that holds the radio button and the label) when user clicks on the <input> or <label>.
If user clicks some other radio-button/label in the same group, I would like to add class_A to this radio-button's parent paragraph and remove class_A from any other paragraph that hold radio-buttons/labels in that group. Effectively, in each <li>, only one <p class="subitem-text"> should have class_A added to it.
Is there a jQuery plug-in that does this? Or is there a simple trick that can do this?
<ul>
<li>
<div class="myitem-wrapper" id="10">
<div class="myitem clearfix">
<span class="number">1</span>
<div class="item-text">Some text here </div>
</div>
<p class="subitem-text">
<input type="radio" name="10" value="15" id="99">
<label for="99">First subitem </label>
</p>
<p class="subitem-text">
<input type="radio" name="10" value="77" id="21">
<label for="21">Second subitem</label>
</p>
</div>
</li>
<li>
<div class="myitem-wrapper" id="11">
<div class="myitem clearfix">
<span class="number">2</span>
<div class="item-text">Some other text here ... </div>
</div>
<p class="subitem-text">
<input type="radio" name="11" value="32" id="201">
<label for="201">First subitem ... </label>
</p>
<p class="subitem-text">
<input type="radio" name="11" value="68" id="205">
<label for="205">Second subitem ...</label>
</p>
<p class="subitem-text">
<input type="radio" name="11" value="160" id="206">
<label for="206">Third subitem ...</label>
</p>
</div>
</li>
</ul>
DEMO: http://jsbin.com/ebaye3
since you are putting all inside P you can use it!
$(function($) {
$('.subitem-text').click(function() {
$(this).parent().find('.subitem-text').removeClass('class_A');
if ( $(this).children(':radio').is(':checked') ) // for sake! ;-)
$(this).addClass('class_A');
});
//you can also write it like this:
$('.subitem-text :radio').click(function() {
$(this).parent().parent().children().removeClass('class_A');
if ( $(this).is(':checked') )
$(this).parent().addClass('class_A');
});
});
You can do something like this:
// find all the radio inputs inside a subitem-text
$('.subitem-text input[type=radio]').bind('change', function() {
// find our parent LI
var $li = $(this).closest('li');
// remove any "class_A"
$li.find('.class_A').removeClass('class_A');
// find the subitem with the checked input and add "class_A"
$li.find('.subitem-text:has(input[checked])').addClass('class_A');
});
jsbin preview/demo
Like this:
$(':radio').click(function() {
$(this).closest('ul').find('.subitem-text').removeClass('active');
$(this).closest('.subitem-text').addClass('active');
});
There is no set way to do this since it is dependent on the html in your document. The simplest way to do this is to bind to each of your radio input elements but you can also use event delegation and bind to the div.myitem-wrapper, li, parent ul or event body tag.
Just binding click handlers to each of the input elements we are interested in:
$("div.myitem-wrapper input[type=radio]").bind('change', function (event) {
$(event.target).is(':checked').closest('p')
.addClass('class_A')
.siblings('p.subitem-text').removeClass('class_A');
});
Same thing but using event delegation to reduce the number of handlers to one. This can really speed things up if you find that you are binding to a large number of elements.
$("#id_of_the_parent_UL").bind('change', function (event) {
var $target = $(event.target);
if ($target.is('input[type=radio]:checked')) {
$target.closest('p')
.addClass('class_A')
.siblings('p.subitem-text').removeClass('class_A');
}
});
Note that it is perfectly valid to say $(this) instead of $(event.target) but it will give different results if and when you start moving to event delegation. An added advantage is that it will be easier for you or the next guy to understand the code in in two months if you go with event.target.