Why does AngularJS swallow event and cause jQueryUI calendar (of datepicker) to not display? <p>I have a problem where jQuery datepicker fails to display the calendar, because something swallows the event. It seems like it might be AngularJS causing the problem. You can see it at: <a href="http://jsfiddle.net/daylight/GAyY3/" rel="nofollow">jsfiddle.net example</a></p> <p>In the jsfiddle example, I've created one datepicker at the bottom of the page which appears all the time and isn't initialized until you click the <strong>[Init DatePicker]</strong> button.</p> <p>Here's the init() method where I initialize the jQuery Datepicker as detailed in jquery docs.</p> <pre><code>function init(selId) { if (console.log !== undefined) { console.log("init()..."); } $(function() { $( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true }); }); if (selId !== undefined) { $(".datepickFix").on("click","#" + selId, function (){ $(".datepicker").datepicker( "show" ); }); } else { $(".datepickFix").on("click",".datepickFix", function (){ $(".datepicker").datepicker( "show" ); }); } } </code></pre> <p><strong>Try This</strong></p> <p>Go ahead and click the "edit" box or [click me] text and you'll see that it doesn't display the jQuery Datepicker. </p> <p><strong>Works As Expected</strong></p> <p>Now, click the [Init DatePicker] button and again, attempt to click the "edit" box and you'll see the calendar display as you expect. If you click the [click me] text it will also display. Everything works as expected.</p> <p><strong>ng-repeat - addrow() calls init()</strong> However, now click an the [Add Row] button and notice that I am doing an ng-repeat in AngularJS to add rows to a table. The row contains another "datepicker" and the Init() code is called upon adding the row.</p> <p>I also call init() from the onclick of the div just to make it fire.</p> <p><strong>The Datepicker Still Doesn't Display</strong></p> <p>However, notice that even though the init() is called -- confirmed by console.log -- you will see that clicking on the "edit" box (jquery datepicker) in the new row <strong>does not display the datepicker</strong>.</p> <p>Now, if you click the [click me] text in the row or you click the [Init DatePicker] the calendar will now show.</p> <p><strong>Clicking [Add Row] button twice makes the first-added row work, not the other</strong> Also, if you click the <strong>[Add row]</strong> button twice, the calendar will show upon initially clicking the first-added row.</p> <p>However, if I call init() multiple times that doesn't work either. Can anyone shed some light on this issue?</p>