jquery-on

When an element contains another element that is being animated via a CSS transition , click events are occasionally not fired. Test case: http://codepen.io/anon/pen/gbosy I have a layout where a series of images have captions which are revealed on hover. On click they fire off a .slideDown of an adjacent element. They themselves are likely to be quickly clicked through by a user. The problem is even more noticeable on a live site than in the codepen. In the codepen, approximately 90% of my clicks are being obeyed, whereas when CSS transitions are disabled, 100% are obeyed. Any suggestions are

I want to click on button 2 to trigger a click event on button 1. However, when I try the following, nothing happens when clicking on #2: no alert for #1 or #2. HTML: <div id="container"> <button id="button-1">Button 1</button> <button id="button-2">Button 2</button> </div> JS: $('#container').on( "click", '#button-1', function(e){ alert('CLICKED 1'); }); $('#container').on( "click", '#button-2', function(e){ $('#button-1').trigger(e); alert('CLICKED 2'); }); http://jsfiddle.net/8RnBf/7/ Moreover, if I put the #2 alert before the trigger, I end up with an infinite loop. http://jsfiddle.net

I have a page using jquery-ui-dialog. Each time the dialog opens, page contents load in using ajax. Then it binds some event using jquery "on()". When the dialog close, it will empty its content. The question is , do I need to unbind the events on ".ajax-content" before $.empty()? edit : concern 1. any possible degrade JS performance? if I empty() hundreds of nodes this way. concern 2. would remove element also remove events from memory(or whatever execution/evaluation chain of jquery)? I am not doing anything to them for now. If the dialog open/close for many times without page refresh, would

So I've got a page with the following structure <div class="editCampaignBanner"> <div> <hr> <label for="file">Upload a new image</label> <input id="file" type="file" name="file" class="valid"> <label for="NewImageURLs">Link URL (Optional)</label> <input id="NewImageURLs" type="text" value="" name="NewImageURLs"> <hr> </div> </div> and I've written some jquery thus: $('div.editCampaignBanner input:file').on('change', function () { var value = $(this).val(); var div = $(this).parent(); var html = '<div>'+ div.html() + '</div>'; if (value.length > 0) { div.after(html); } else if ($(this) > 1) {

This question already has an answer here: Turning live() into on() in jQuery 5 answers I used live() for generated pages and frames. But in jQuery 1.9 this function is deprecated and does not work. I use on() instead of live() but this method works for one time, and does not work in frames. My code looks like this: $("#element").live('click',function(){ $("#my").html(result); }); What is the solution? Samuel Liew $('body').on('click', '#element', function(){ $("#my").html(result); }); The clicked element selector is now passed through the .on() function parameters, and the previous selector