We Keep Coding

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.

specific element in `this` with jquery

So in jquery, if I want to target a div in the .test class on a click I use the following code:
$('.test div').click(function(){
//do something
});
But if the "do something" part requires a this parameter, I can't seem to get the same effect. So lets say I want to make all bold text in any div with class test fade out. I would have to do something like this:
$('.test div').click(function(){
$(this ' b').animate({
opacity:toggle
},500);
});
But that is invalid code. So How would I target a specific element in a this Jquery selector?

You need to pass the context as the second parameter to jQuery
$('b', this).animate({
opacity:toggle
},500)
Another solution is to use .find()
$(this).find('b').animate({
opacity:toggle
},500)

Below code will help you to do this
$(".test").click(function () {
$("b", this).fadeToggle(500);
});
Take a look at this jqfaq.com site,it has more jquery related faqs. It may be helpful to you.

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 - for loop to make events

I'm using a script where I need to make multiple events to make a popup appear.
I tried this, but it doesnt work:
for (i=0;i<=storingen;i++)
{
$("#storing" + i).click(function(){ centerPopup(); loadPopup(); });
}
The output should be:
$("#storing0").click(function(){ centerPopup(); loadPopup(); });
$("#storing1").click(function(){ centerPopup(); loadPopup(); });
$("#storing2").click(function(){ centerPopup(); loadPopup(); });
$("#storing3").click(function(){ centerPopup(); loadPopup(); });
etc.
But the amount of divs with the id #storing(number here) is variable, so i wanted to make this, but it doesnt work...
I get the storingen variable from php:
<script type="text/javascript">aantalstoringen('.$aantalstoringen.')</script>
which i pick up in the js file like this:
function aantalstoringen(storingen){
storingen=storingen;
}
I did an alert(storingen), which traced the right number, so that is ok.
COuld it be that the for loop doesnt work because that isnt in the aantalstoringen function, but in another function:
$(document).ready(function() {
I used this tutorial to make the javascript:
http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/#popup1
and the script you get is this:
http://yensdesign.com/tutorials/popupjquery/popup.js

Use the [name^="value"] selector instead:
$('[id^="storing"]').click(function(){ ... });
Basically, it's saying "find all elements whose ID begins with 'storing'."
If you need it more explicit, you can test the id inside a each() to apply better filtering. e.g.
$('[id^="storing"]')
// make sure all IDs end in a number
.each(function(i,e){
if (/\d$/.test(e.id)) {
// now that we only have ids that begin with storing and end in
// a number, bind the click event
$(e).click(function(e){ ... });
}
});

You don't create dozens of event listeners that call the same handler. You create one listener on a higher level in the DOM and make it react only if the ID of the target matches the pattern.
This is why libs like jQuery are teaching kids bad manners... -.-

It could be any number of things. It would help if you showed us more of the code, like all of the aantalstoringen function.
The following should work:
function aantalstoringen(storingen) {
$(document).ready(function() {
for (i=0;i<=storingen;i++) {
$("#storing" + i).click(function(){ centerPopup(); loadPopup(); });
}
});
}
That said, this is a really bad way to do this. I would have each of your elements also include class="storing". Then you don't have to get the number of objects from the server:
$(document).ready(function() {
$(".storing").click(function(){ centerPopup(); loadPopup(); });
});

First you give a class name to the div like class="popupDiv". Then you try something like this
$('.popupDiv').live('click', function(){
// var id = $(this).attr('id'); By doing so you will get the current id of the div too.
centerPopup();
loadPopup();
});

As Brad correctly said, you don't have to know the amount of such elements, you can just iterate over all element having id starting with something.
So your code would be:
$(document).ready(function() {
$('[id^="storing"]').click(function() {
centerPopup();
loadPopup();
});
});

Can't figure out how to use $(this) correctly in jQuery to get hovered element

So I have several DIVs called achievement, and each one contains a span called recent-share. WHat I would like to do is have each recent-share hidden at first, and the have it appear when the parent 'acheivement' class is hovered. I'm trying to use $(this) to get it, but it won't work. I'm assuming this is a syntax error or something, and any help would be appreciated!
<script>
$(".recent-share").hide();
$('.achievement').hover(
function ()) {
$(this).next(".recent-share").show();
});
</script>

Try:
$( ".achievement" ).hover( function() {
$( this ).find( ".recent-share" ).show();
});
Also you had a syntax error – it should be function () {, not function()) {.

.next() targets a sibling. Try:
<script>
$(".recent-share").hide();
$('.achievement').hover(
function ()) {
$(this).find(".recent-share").show();
});
</script>

Maybe try one of thes 3 ways:
1. children() lookup
$(this).children('.recent-share')
2. context lookup
$('> .recent-share',this)
3. find()
$(this).find('> .recent-share') // is basically the same as nº2
Not tested, had this in my snippets.