jQuery.load breaks custom event listeners

Reported by:	davidnduffy@hotmail.com	Owned by:	davidnduffy@hotmail.com
Priority:	low	Milestone:	None
Component:	ajax	Version:	1.6.4
Keywords:		Cc:
Blocked by:		Blocking:

Description

I've tested with jQuery 1.6.1 and 1.6.4.

I've debugged this in IE9 and FF6.0.2 and get the same problem in both.

I have a couple listeners registered for a custom event via:

$('#someElementId').bind('myCustomEvent', function (event, data) { /* do something */ });

And I have a call to $.event.trigger('myCustomEvent', id); in a click handler elsewhere.

Everything works fine triggering and receiving the custom event until I call .load:

$('#placeHolder').load('http://someURL', { foo: 'bar' });

After calling .load the custom event trigger call will still happen but none of the registered listeners receive the event.

Attachments (0)

Change History (4)

Changed October 14, 2011 10:00PM UTC by davidnduffy@hotmail.com comment:1

Using $.get instead of load also breaks the listeners firing.

Changed October 14, 2011 11:14PM UTC by rwaldron comment:2

component:	unfiled → ajax
owner:	→ davidnduffy@hotmail.com
priority:	undecided → low
status:	new → pending

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket!

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/

Open the link and click to "Fork" (in the top menu) to get started.

Changed October 18, 2011 05:22AM UTC by davidnduffy@hotmail.com comment:3

status:	pending → new

I tried it with the jQuery Edge version and it still repro's.

Here is a link to a repro on JSFiddle:

http://jsfiddle.net/WZ3BM/10/show/

You need to run it including the "/show/" part of the URL because trying to run within JSFiddle raises errors.

Repro steps:

1) click on the rows in the table and see that the Values under the heading "Results" are updated with what is in the clicked on row.

2) click one of the red or green div's that contain random test numbers and say "click for details"; it will reload the same page in a "popup" div.

3) click on the 'X' in the "popup" div to close it.

4) click on the rows in the table again and you will see that they no longer update the Values under the heading "Results".

Because I reload the same page in JSFiddle to simulate my dynamic content it wires up the JavaScript twice so clicking the red or green div's again will have strange results.

I have narrowed down the problem further while attempting to build a repro on JSFiddle. The problem with calling .load (or $.get) only occurs for me when loading a full page that contains script tags etc. If, in addition to the URL, I provide a filter to select some sub element from the results, or I load partial markup which does not contain a head with script tags, then there is no problem.

The problem only occurs when loading a full page with script tags and not doing a subselect against its content.

Changed October 19, 2011 05:17PM UTC by timmywil comment:4

resolution:	→ invalid
status:	new → closed

Each time you are loading the "dynamic content", you are loading jQuery and your script again. The override of the $ variable kills the knowledge of the custom event when triggering.

Side navigation