We Keep Coding

Event handler does not fire with .on(), but works with .delegate()

I'm using a Bootstrap Modal dialog, and I have an event handler set up so that once the modal closes, it triggers a couple of other updates on the page. I had been using the .delegate method which works perfectly. After reading that it was deprecated, I tried to move to the .on method, however the handler was not getting triggered. I cannot figure out why. Here are my two code snippets for comparison:
Delegate:
$(document).delegate('#streamingPopup', 'hide.bs.modal', function () { ... });
On:
$('#streamingPopup').on('hide.bs.modal', function () { ... });
No code withing the callback function has changed.
As far as I can tell, I'm using it the way the documentation says it should be used (http://api.jquery.com/on/). I'm assuming it has something to do with the hide.bs.modal event, or with the fact that it's attached directly to the jQuery object rather than the DOM itself, but I can't work out why it would work in one but not the other. Can anyone point me to what I'm doing wrong?

You might need to change the syntax for .on:
$(document).on('hide.bs.modal', '#streamingPopup', function () { ... });
This must work, as it targets a static parent. Replace the document with a static parent of #streamingPopup.

jQuery prevent function to duplicate on click

I want to initiate a plugin only if clicked on its parent element (because that element is being appended with jQuery so it does not exist when page loads), So I am trying following code:
$(document).on('click', '.wrap', function(){
ColorPicker(
document.getElementById('slider'),
document.getElementById('picker'),
function(hex, hsv, rgb) {
});
});
This works fine, but every time I click on the .wrap, it duplicates (please check the demo to see the problem). Is there anyway to fix it?
Demo:
http://jsfiddle.net/rhzzG/
(Click in the box to see the problem)
Thanks.

Rather than using on() to trigger this event every time the element is clicked, simply use jQuery's one() method to only fire it once:
$(document).one('click', '.wrap', function(){ ... });
ColorPicker will then take over from there with handling its own events.
JSFiddle demo.

You may use one instead
$(document).one('click', '.wrap', function(){
//...
});

$('a').trigger('click'); not working

How do I make jquery click test
<script>
// this wont work
$('#mylink').trigger('click');
</script>
Please can you help

If your intention is to navigate to the specified URL as if the user had clicked the link try calling the DOM .click() method instead of the jQuery .click() method:
$('#mylink')[0].click();
The jQuery .click() will call event handlers that you've bound but not cause the default click behaviour.

$(document).ready(function(){
$('#mylink').trigger('click');
});

You need to trigger the default click method, not the one by jQuery. This can be done by adding the default click option within a click event of jQuery using this.
This is how the JavaScript looks. It basically creates the event when the DOM is ready, and clicks it intermediately, thus following the link.
$(function() {
$('a').click(function() {
// 'this' is not a jQuery object, so it will use
// the default click() function
this.click();
}).click();
});
To see a live example (opening about.com), see: http://jsfiddle.net/8H9UX/

You need to wait until the DOM has finished loading. This can be done with jQuery. The anonymous function is run at page load once all the elements are available in the DOM.
<script>
$(function() {
$('#mylink').trigger('click');
});
</script>

Just click:
$("#mylink").click();
If your scripts are in the head then you need to ensure that the element exists, so the script should be executed when document is ready.
$(document).ready(function () {
$("#mylink").click();
});

try this
setTimeout(() => {
$("#mylink")[0].click();
}, 500);

If you are expecting the file to get downloaded, it will not happen becauer trigger() will not trigger the default event.

document.getElementById('mylink').click();
trigger('click') will fire the click event but not the default one.
$('a').click(function(){ alert('triggered') }) // this will be fired by trigger

use the following way.... since you want to download the file prevent the link from navigating.
$(document).ready(function() {
$('#mylink').click(function(e) {
e.preventDefault(); //stop the browser navigating
window.location.href = 'test.zip';
});
});

your above code will not work because you have assigned value in href and then you want some operation onclick of this anchor tag.
test
first of all you have assigned .zip to href. So it will open zip file onclick first and will not trigger any other operation in onclick trigger.
so whatever operation you want to do , perform it first then open .zip
use code like below
test
$('#mylink').click(function(){
// do your operation here
// now open zip
});

jQuery trigger('click') not working with Jasmine-jquery

This is my test code:
describe("Login", function(){
beforeEach(function(){
loadFixtures('login-fixture.html');
})
it("should enable the button when checking 'remember password'", function(){
$('#remember').trigger('click');
expect($('#keepIn')).not.toBeDisabled();
});
});
And this is my production code:
$(document).ready(function(){
$('#remember').click(function(e) {
if($('#remember').is(':checked'))
{
$('#keepIn').removeAttr('disabled');
}
});
});
This is not working, the production code never gets called. I have put alerts before and after the trigger event and after the trigger the checkbox is checked, but the .click function does not get called.
Any thoughts on why is this happening?

Without seeing the rest of the code, I'm assuming the "login-fixture.html" contains the "#remember" checkbox. If so, it's loading after the DOM loads. Meaning that the 'click' event you want assigned will only apply to previously loaded elements. The jQuery on() event will assign any event you want to newly loaded elements. You might want to try adding a on() event to that id. Something like:
$(function(){
$('#remember').on('click', function(){
if($('#remember').is(':checked')){
$('#keepIn').checkboxradio('enable');
}
});
});
Hope that helps.
See: http://api.jquery.com/on/

Jquery live not working in IE

I have some code that works fine in FF but not in IE. I have read other posts saying that the Jquery live method does not support change events but I am using a click event. Here is my code, it is inside $(document).ready(function():
$("a").live("click", function(e) {
alert("link clicked");
//do stuff
});
If FF the alert is fired but not in IE. When I use $("a").click it works fine, the problem is that I need to the function to be applied to links that do not exist when the page is first loaded (they will be created via ajax calls at a later stage).
Do I have any options here. We are using jquery-1.4.1.min.js.
Thanks in advance

if those links are within a specific content, you can use:
$('#link_container_id').delegate('a', 'click', function(e){
alert('link clicked');
});
.delegate() will watch if there are any events (click in your case) bubbling up, if so it checks for the target and compares it to 'a' in your case. Should work, but untested.

Elements should exist in the DOM at the moment you attach the live event. If later they are recreated (for example in an ajax callback) you don't need to reattach the event handler again. If elements don't exist at page load you can attach the live event when they are loaded, but if you do this then probably you no longer need the live event as you can directly attach the click event.