how to bind 2 elements in jquery on click function - javascript

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.

Related

How to use event.target inside jQuery child selector?

I want to check if a child-element of a clicked div has a certain class.
So i do this:
$('.panel').on('click', function (event) { if($(".panel input").hasClass('h5_validator_error')) { event.stopPropagation(); } });
The problem: I have more then one .panel class. Since my whole site gets generated by the user and json-files, i need a dynamic environment without ids.
So, actually my if-statement is preventing all .panel-clicks from doing their job.
I want to do something like this:
if($(event.target + ".panel input").hasClass('h5_validator_error')) { event.stopPropagation(); }
So i want to select all input - elements from the clicked div without
having an array and loop through it.
Is this possible? Or what is the most efficient way of selecting child-elements of the clicked one?
You should rather use this to get the targeted element:
$(this).find("input").hasClass('h5_validator_error');
or
$('input',this).hasClass('h5_validator_error');
You shoud make the dom object $(event.target) and then apply the jquery method on it.
Try this:
$('.panel').on('click', function (event) {
if($(event.target).find('input').hasClass('h5_validator_error')){
alert('true');
}
else{
alert('false');
}
});
Working Example

Multiple selectors for jQuery on method?

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
});

Issue regarding javascript function not firing on hover of div

I have a use case whereby i know that all the divs i am interested in will have the word 'tabz' in them but have yet to find a way to fire my jquery when a user clicks on a div with such an id.
$('div[id=*"tabz"]').on("click", function()
{
alert(event.target.id);
});
This is what i have however the alert never fires.
When I replace the method with :
$('div').on("click", function()
{
alert(event.target.id);
});
it will give me the following:
tabz91
So i know there are divs that meet my selector but it I am unsure as to why the alert is not firing.
Any help greatly appreciated
The correct syntax is simply
$('div[id*="tabz"]')
(the = and the * are inverted in your example).
You may use
$('div[id$="tabz"]')
if the id attribute ends with your pattern.
$('div[id*="tabz"]').on("click", function()
{
alert(event.target.id);
});
It's a typo, * and = inverted. See this example : http://jsfiddle.net/Xcn6N/
try instead of =* it is *=
$('div[id*="tabz"]').on("click", function() {
alert(event.target.id);
});
For Further Assistance on Selectors in jQuery see this page
jQuery Selectors

Javascript Sticky Notes

I made some sticky notes in javascript for fun.
When there are multiple sticky notes on the screen, I want the one that is selected to be brought forward. IE. raise the z-index to be higher then the other sticky notes.
Currently I am doing this with CSS using :hover, which is kind of annoying. I want to do it in javascript/jquery. I tried to do addClass/removeClass with focus() and blur()
This is what I have so far
$('.darkYellow').click(function() {
$(this).focus(function() {
$(this).addClass("index");
});
});
$('.darkYellow').blur(function() {
$(this).removeClass("index");
});
Updated and Working thanks to Christoph
http://jsfiddle.net/EnigmaMaster/aQMhk/6/
Class selectors start with a . character, class names do not (well, they can, but that way lies madness).
$(this).addClass("index")
for addClass there is no need to include '.'
Simply
$(this).addClass("index");
http://api.jquery.com/addClass/
Though at the moment I don't know, why .on() does not work (this shoud be the preferred method!), the following code should work:
$('.darkYellow').live("click", function() {
$(".index").removeClass("index");
$(this).addClass("index");
});
This is all you need.
live event handler on click ( use of on() should be preferred )
look for index note and remove class
add Class to current "clicked" element
DEMO
You're calling $('.darkYellow').click() before the sticky notes actually exist. .click() will add an event to each element that matches the selector at the time of calling. What you want is something like .live() which will handle all elements, present and future E.g.
$('.darkYellow').live('click', function() {
$(this).focus(function() {
$(this).addClass("index");
});
});
UPDATE
Try:
$('.darkYellow').live('click', function() {
$(this).addClass("index");
});
$('.darkYellow').live('blur', function() {
$(this).removeClass("index");
});
As someone else pointed out, the call to .focus() should be unnecessary.
Here's a toggleFocus() function I recently wrote, it's designed to add a .is-focused class the parentNode on focus/blur events.
CodePen Demo
function toggleFocus(e) {
setTimeout(() => {
e.addEventListener('focus', ({path}) => {
path[2].classList.add("is-focused");
}, true);
e.addEventListener('blur', ({path}) => {
path[2].classList.remove("is-focused");
}, true);
}, 0);
}
const items = document.getElementById('items');
const itemsArray = items.querySelectorAll(".item");
[].forEach.call(itemsArray, (item) => {
toggleFocus(item)
});

Jquery next adjacent selector with $(this)

How could i use the adjacent selector "+" with the $(this).
I would need a help with the commented lines with //this doesnt work:
$(".ExpandCollapse").click(function () {
if ($(this).nextUntil('.Collapsable').is(':visible'))
{
//this doesnt work
$(this + ".Collapsable").hide();
}
else
{
//this doesnt work
$(this + ".Collapsable").show();
}
});
Could you give me a hand?
Thanks a lot in advance.
Best Regards.
Jose
Use next()
$(this).next(".Collapsable").hide();
Or simply:
$(this).next().hide();
You can also cut down on having two statements for hiding and showing:
$(this).next().toggle();
this is a reference to the DOM element of invocation. You can't concat a string to that.
So you either can directly use this to act on it
$(this).hide();
or you can walk through the DOM from there
$(this).next().hide();
$(this).prev().hide();
$(this).closest('.Collapsable').hide();
// another 200 methods

Categories