We Keep Coding

Handling priority with events from extenal libraries in Javascript

I'm using Remodal Javascript lib to handle with modal windows.
The point is that the library has handlers for custom events, e.g. the following javascript
$(document).on('opening', '.remodal', function (e) {
console.log('opening');
});
will be triggered when a modal window is open by clicking on another DOM element.
<a data-remodal-target="modal-window-id" id="trigger">CLICK ME TO OPEN MODAL</a>
<div class="remodal data-remodal-id="modal-window-id>MODAL CONTENT</div>
Now, If I add in a javascript file also the following call to a click event
$(document).on('click', '#trigger', function (e) {
console.log('trigger clicked');
});
regardless of the position of the previous script (i.e. before or after the other), I see that the opening event is fired before. I know, in Javascript there is not really a guarantee of event execution, apart from some exeptions or when using jQuery (e.g. attaching the listeners in the proper sequence).
Now, how can I manage to execute click before opening? It occurs before, but somehow there should be another click listener attached to that anchor that is executed before.
Any idea?

If what you're really after is a way to force execution of code in opening handler to run after click handler, you can always use setTimeout:
setTimeout("console.log('opening');",100);

jQuery event is overwriting

i am facing a unknown problem and it is as below:
I have one link to open some popup
Link Here
Now this is working fine, when i click on a link then popup is fired.
JS - I can not make changes to this event (Security reasons)
$(".pop-link").off("click").on("click", function (e) {
<!-- Code to open popup -->
});
Now, i want to do one more event on click of .pop-link. and I added as below:
$(".pop-link").on("click", function (e) {
console.log("Sdf");
});
With this my console.log works but then popup is not displayed.
Not sure why it is overwriting previous event. What can i do to have 2 events on same link?

I figured it out.
I tried using bind and it is working now
$(".pop-link").bind("click", function (e) {
console.log("Sdf");
});

You have created 2 click events using same class name. so jquery will execute last event.
To solve this you can add you second event code inside popup event code like this :
$(".pop-link").off("click").on("click", function (e) {
<!-- Code to open popup -->
console.log("Sdf");
});

Jquery click event propagation on second click after Ajax

Hi i always use this example code to make a div work as link.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
The problem is i have inserted an other javascript action inside (this action need to stay on the current page) the problem is Not the first click but the second..
This javascript actions its an ajax function that "change" that html.. in the fiddle where i have no ajax, its working great, on first, second, third, any clic..
Here is the code http://jsfiddle.net/HzsH9/4/
Im using.. Jquery, also this is the anti propagate code im using
$("a").bind("click", function(e){ alert("clicked!"); e.stopPropagation() });
The outer div class is class="listingsRow"
and the inside javascript goes here
<a id="btn_remove_114" name="btn_remove_114" onclick="ajaxFavouratesRemove(1,114,375);">
<div class="fav"></div></a>
After ajax success, its changed for this
<span id="spadd114"><a id="btn_add_114" name="btn_add_114" onclick="ajaxFavouratesAdd(114);"><div class="nofav"></div></a></span>
Also i just found this, but i cant manage to do the same how to stop event propagation with slide toggle-modified with the updated code.

Classic case of event delegation
$(".listingsRow").on('click','a',function(e){
alert('clicked');
e.stopPropagation();
})

$('#singles_114').click(function(e){
e.stopPropagation()
});

jQuery is not catching click on some content loaded

I'm using jQuery 1.7.2 with Zoomy and jmpress plugins. Also I'm using boilerplate+bootstrap downloaded from initializr.com
I'm trying to create a "game" like [Waldo/Wally] when you have to find some character in a photo. Each photo has a different character to find.
I'm using jmpress as a presentation plugin to go from one photo to another every time the character is found. jmpress loads the content trough ajax (and I need that behavior) because I want a pretty fast load of the web.
Problem: The .on("click") event is not being caught on one of the elements that exist inside the content loaded.
As an example, I'll explain my problem with one of this characters (just taking parts of code).
I have in my index.html some divs to load the characters, I'll take the nurse character:
<div id="nurse" class="step container" data-src="women/nurse.html" data-x="7500">
Loading...
</div>
The jmpress load the data-src (women/nurse.html) trough ajax when the user is near to that div (step). It loads great.
This is the code of nurse.html
<script type="text/javascript">
new Image().src = "img/nurse_big.jpg";
</script>
<div class="descripcion">
<p>Bla, bla, bla.</p>
</div>
<div class="imagen">
<img src="img/nurse.jpg" alt="Find the nurse" />
</div>
As you can see, I have two divs loaded inside the #nurse div (that has .step class).
I have this code on my js/script.js file when I try to catch the click event:
$(".step").on("click", function(event){
console.log(event.target);
});
I'm also trying with "body" tag to see what happens
$("body").on("click", function(event){
console.log(event.target);
});
If you check the console while the message is showing (div.descripcion) it catch the event and print. But, after the div.descripcion is removed and the image appears, it dosen't. Like if that div.imagen or even elements inside it dosen't exist. The click event is not catched. I tried to catch mousemove event and It does.
Why is not catching the click? any idea?
You can see a working version: [Removed]
And the not working version: [Removed]
UPDATE: I forgot, if I use .on("click") it dosen't work. But if I use .on("mousemove") for example, it works. That's the weird part. .on() is working, but not for the click event.
UPDATE 2: I have removed the links of the live examples because they where dev versions. I'll publish the link to the final work when is published. Thanks to all of you for taking the time. Specially to #Esailija that gives me the answer.

Once again, you need to use on for content loaded later on:
$("body").on("click", ".step", function(event){
console.log(event.target);
});
Replace body with the closest static element that holds the .step elements.
Static means exist in the DOM when the you execute the line:
$(...).on("click", ".step", function(event){
Example:
$('#ContainerId').on("click", ".step", function(event){
// Do what you want.
});
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers
on docs

The zoomy plugin you are using does this:
'click': function () {
return false;
}
Since the element you are clicking when you are on the image, is actually the zoomy elements, those get to handle the events first. They handle it by returning false, which means doinge.stopPropagation() as well as e.preventDefault(). So the event won't even come to .imagen.
There is also unterminated multi-line comment in your code, not sure what that does but it can't be good. Consider just deleting code instead of commenting it out.
Anyway, clearing everything like this:
$.cache = {}; //Can also do $("*").off() I think
And then doing:
$(".step").on("click", ".imagen", function(event){
console.log(event.target);
event.preventDefault();
});
And it works fine. You might wanna edit the plugin to do this instead:
'click': function (e) {
e.preventDefault();
}
Alternatively you could look for a plugin that is developed by someone who knows what the hell they are doing or write it yourself.

In the documentation in http://zoomy.me/Options.html you can allow the plugin to have a clickable area by adding in true to the clickable option.
So when calling zoomy() on a element all you have to do is add a little bit of code inside the zoomy function.
$('.element').zoomy({clickable:true});
and that should fix everything,

The alternative way to catch the function on click event is just like below.
<div onclick="fireClickEvent();" > Just firing the click event!</div>
function fireClickEvent() {
console.log(event.target);
}

In IE the onbeforeunload event is fired for links that don't unload the page

I am writing a plugin to a CMS (umbraco) and I wish to attach a warning dialog to various actions on the page, one such action is clicking a link (JavaScript links), in most browsers the following code works well:
$(".propertypane").delegate("a, a div", "click", function () { window.onbeforeunload = confirmNavigateAway; });
The following is an issue in IE because IE appears to trigger onbeforeunload event when any link is clicked, even though the link is not navigating away.
I've set up an example here:
http://jsfiddle.net/DETTG/8/
Note: I do not have control over the ajax controls within the propertypane, they're written by third parties.

Maybe this page will help you?

If you remove "href" then it will work. But then you would need to style it as a link element and add the attribute onclick if you want to execute a function. Here is the updated version: http://jsfiddle.net/DETTG/34/
<a onclick="alert('do some ajax');" style="color:blue; text-decoration:underline; cursor:pointer">javascript</a>