Multiple selectors for jQuery on method? - javascript

Is it possible to pass more than one child selectors in the jQuery on method?
$("#tablename").on("click", "tr", function() {
}
click needs to be fired if the user click on tr or checkbox. Something like:
$("#tablename").on("click", "tr input[type='checkbox']", function() {
}
Thanks in advance...

You can use multiple selector to specify more than one selector
$("#tablename").on("click", "tr, input[type='checkbox']", function() {
});
But in a table all elements could be in a tr so what is the difference

You can combine them with comma using multiple selector, the closing parenthesis is also missing. If you have space instead of comma it is treated as descendant selector.
$("#tablename").on("click", "tr, input[type='checkbox']", function() {
});

You can use comma , for multiple selector
$("#tablename").on("click", "tr, input[type='checkbox']", function() {
//use "," ---^^^---- here for multiple
});
reference multiple-selector

Yes you can, your code works fine. But the problem is the event will be fired twice if the check box is inside the 'tr'. To prevent it you have to force the event delegation. You receive the event as a argument and in your code use e.preventDefault(). This will make sure click event is not delegated from checkbox to parent 'tr'.
$("#tablename").on("click", "tr, input[type='checkbox']", function(e) {
//e.preventDefault(); // This is wrong, plz check
e.stopPropagation(); // Hope this will help you one day
});

Related

how to bind 2 elements in jquery on click function

For closing a modal with the class submitmodal i use this code and it works fine.
$('.submitmodal').click(function() {
window.location.hash='close';
});
For click on the body somewhere i use this:
$('body').click(function() {
window.location.hash='close';
});
How can i merge them together?
I tried this but it does not work
$('.submitmodal', 'body').click(function() {
window.location.hash='close';
});
Try
(".submitmodal, body").click(function() {
window.location.hash="close";
});
The selectors have to be in the same string, seperated by a comma.
Try this :
$(document).on("click",'body',function(){
window.location.hash='close';
})
This should do it
$('.submitmodal, body').click(function() {
window.location.hash = 'close';
});
You can use Multiple selector using first selector, second selector
$('body,.submitmodal').click(function() {
window.location.hash='close';
});
You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.
$("body, .submitmodal").click(function() {
window.location.hash="close";
});
For More help see this : multiple-selector
I hope it helps you :), Thanks.
This should solve your issue:
$('.submitmodal, body').click(function() {
window.location.hash='close';
});
But the problem I see is that when you click anywhere over the body you are closing your modal and that includes when you click over the element that opens itself. So I would suggest you to write something like that:
$('body, .submitmodal').click(function(e) {
if (e.target !== this) return; //prevents body's child elements from being affected
window.location.hash='close';
});
I've done some tests and apparently 'this' references to the first selector (body) which is fine for this situation.

how to get chosen option value on hover/mouseover event using jquery chosen plugin?

I am trying to get option value on hover/mouseover event when option is hovered using chosen plugin....
Fiddle : Demo Fiddle
Here is js code...
$("#myselect").chosen();
$('#myselect').next('.chosen-container').on('mouseenter', 'li.active-result', function(e) {
alert($(this).text());
alert($(this).val()); // how to get option value...?
});
USe delegate for that, because chosen plugin creates the .active-result class elements dynamically.
$("#myselect").chosen();
$(document).on("hover",".active-result",function(){
alert($(this).text());
});
Fiddle
Edit
$(document).on("hover",".active-result",function(){
alert($("#myselect option").eq($(this).data("option-array-index")).val());
});
Updated fiddle
You need event delegation for binding the events to dynamically added DOM:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$("body").on('mouseenter','li.active-result',function(){
alert($(this).data('option-array-index'));
});
Working Demo
As this plugin created new elements for options and to read option value you need find option matching text and read its value:
$('#myselect').next('.chosen-container').on('mouseenter', 'li.active-result', function(e) {
var currentText = $(this).text();
alert($(this).text());
alert($('#myselect option').filter(function () { return $(this).html() == currentText; }).val()); // how to get option value...?
});
Demo

Check if image was clicked JQuery

I want to know how to check if my image was clicked using jquery...
Here is my html code
<img class="img-fade" src="img/message.png" id="messages" />
And my jquery code im using:
$('#messages').on("click", "img", function (e) { alert('hi'); }
But it still isnt working,
Could anyone help? Thanks :D
When you do:
$(selector1).on(event, selector2, function);
jQuery binds a handler to the event on the DOM elements that match selector1. When this handler runs, it walks the DOM hierarchy from the most specific element up to the element matching selector1, and checks whether any of the elements matches selector2. If it finds a match, it calls function with the appropriate execution context.
This is how on() is able to handle events on DOM elements that are added dynamically after the delegation is created.
i want to know how jquery' delegate or on(for delegate) works
In your case you made selector1 and selector2 the same element which caused trouble.
You can try this too
$('#messages').click(function(){
alert('hi');
}
$(function() {
$('#messages').on("click", function (e) {
$('.content2').fadeOut(3000);
window.setTimeout(function() {
window.location.href = 'messagecenter.html';
}, 3050);
});
});
I just fixed it :)
Instead of having $('#var').on("click", "img", function(e)) {});
I just removed the "img" part which I don't think was needed.
Thanks :)

jQuery click function acting strange when adding/removing classes

I have two list items that, when clicked, should change classes from '.off' to '.on'. Only one element should be '.on' at a time so when one is already turned on and the other is clicked both elements should change classes from '.off' to '.on' and vice versa. If a list item with a class of '.on' is clicked it should change classes to '.off'
The problem I am having is when a list item with class '.on' is clicked it still runs the click function as if it had a class of '.off'
My html:
<ul>
<li>ABOUT</li>
<li>SUBMIT</li>
</ul>
My javascript (running on jQuery 1.7.1)
$('.off').click(function(event) {
event.preventDefault();
$(".on").addClass("off").removeClass("on");
$(this).addClass("on").removeClass("off");
});
$('.on').click(function(event) {
event.preventDefault();
$(this).addClass("off").removeClass("on");
});
Does anyone know what is going on here? Is there something wrong in my code or have I encountered some sort of bug here?
http://jsfiddle.net/ZC3CW/6/
The selectors you're using to bind the event using click() are used to select the elements to add the event handler to. The selector is not considered when the handler is run.
You should be looking for something more like this:
$('li').click(function(event) {
event.preventDefault();
if ($(this).hasClass('off')) {
$(".on").addClass("off").removeClass("on");
$(this).addClass("on").removeClass("off");
} else { // $(this).hasClass('on');
$(this).addClass("off").removeClass("on");
}
});
You might want to make the li selector more explicit by adding a class/id to the ul or li's.
To confuse things further, you could also do this (if you're using jQuery > 1.7);
$(document).on('click', '.off', function(event) {
event.preventDefault();
$(".on").addClass("off").removeClass("on");
$(this).addClass("on").removeClass("off");
});
$(document).on('click', '.on', function(event) {
event.preventDefault();
$(this).addClass("off").removeClass("on");
});
This is because the .on() function works by attaching the event handler to the selected elements (document), and will only execute the handler (the function) on the event specified (click) if the element that the event originated from matches the selector .off at the time the event fired, not at binding time.
I would suggest adding a click handle to a different selector, this should work for you...
$("ul li a").click(function(e){
e.preventDefault();
if($(this).hasClass("off")){
$("ul li a").addClass("off").removeClass("on");
$(this).addClass("on").removeClass("off");
}
else{
$(this).addClass("off").removeClass("on");
}
});
The problem is that jQuery handlers get attached at page load and remain the same regardless of changing their classes. Use live('click', handler) on('click', handler) instead of click().
Edit: just noticed that .live() is deprecated in jQuery 1.7.
The problem as I see it is that your "on" class is not in play at the time of the click event, so your $('.on').click method is never being called.
Try re-assigning your events after changing classes (example follows) :
var assignClicks = function () {
$('.off').click(function(event) {
event.preventDefault();
$(".on").addClass("off").removeClass("on");
$(this).addClass("on").removeClass("off");
assignClicks();
});
$('.on').click(function(event) {
event.preventDefault();
$(this).addClass("off").removeClass("on");
assignClicks();
});
};
assignClicks();
Hope this helps,
Pete
The click is bound to the element not the class.
Maybe you can attach the events to the elements and detect/toggle the elements classes:
$('li').click(function(event) {
event.preventDefault();
if( $(this).hasClass('on') ) {
$(this).removeClass('on');
}
else {
$(this).addClass('on');
$(this).siblings().removeClass('on');
}
});

How to check if there is already a click/event associated to an element

lets say I have
function trigger(){
$('a.pep').each(function(){
$('a.pep').click(function(){
console.log($(this).val());
});
});
}
function push(){
$('body').append('<a class="pep">hey mate i have no trigger yet</a>');
trigger(); //now i do but the others have duplicated trigger
}
$(document).ready(function(){
$('a.push').click(function(){
push();
});
});
So it seems that the click event is being applied twice/+ because the console.log is lauched more than once by click
How can i prevent this?
The problem is that you call $('a.pep').click() lots of times. (In fact, you bind as many click handlers as there are matching elements to each element. And then you do it again every time one of them is clicked.)
You should lever the DOM event bubbling model to handle this. jQuery helps you with the on method:
$(document.body).on('click', 'a.pep', function() {
console.log('element clicked');
$(document.body).append('<a class="pep">Click handlers handled automatically</a>');
});
See a working jsFiddle.
Note that I have removed the val call, because a elements can't have a value... Note also that the on method is introduced in jQuery 1.7; before that, use delegate:
$(document.body).delegate('a.pep', 'click', function() {
Small change to your trigger function is all you need. Just unbind the click event before binding to ensure that it is never added more than once. Also, you don't need to use each when binding events, it will add the event to each item automatically.
function trigger(){
$('a.pep').unbind('click').click(function() {
console.log($(this).val());
});
}
You can check using data('events') on any element if the required event is attached or not. For example to check if click event is attached or not try this.
if(!$('a.pep').data('events').click){
$('a.pep').click(function(){
console.log($(this).val());
});
}
you should use jQuery live here because you add DOM elements dynamicly and you want them to have the same click behaviour
function push(){
$('body').append('<a class="pep">hey mate i have no trigger yet</a>');
}
$(document).ready(function(){
$('a.push').click(function(){
push();
});
$('a.pep').live('click', function(){
console.log($(this).val());
});
});
Try:
if($('a.pep').data('events').click) {
//do something
}
i think if you use live() event you dont need to make function
$('a.pep').live('click', function(){
console.log($(this).val());
});

Categories