Skip to main content

Bug Tracker

Side navigation

#10349 closed bug (invalid)

Opened September 27, 2011 03:32AM UTC

Closed September 27, 2011 03:56AM UTC

Last modified September 27, 2011 04:36AM UTC

domManip Causes Duplicate Events to Fire if Event Binding Code is Contained Within Manipulated Element

Reported by: js22@ualberta.ca Owned by:
Priority: low Milestone: None
Component: manipulation Version: 1.6.4
Keywords: Cc:
Blocked by: Blocking:
Description

Example here:

http://jsfiddle.net/9amah/

Following the #button div, there is some event binding code to immediately set up a click handler on #button.

When the element is domManip'd, the click event remains intact.

However this line:

if ( scripts.length ) {
    jQuery.each( scripts, evalScript );
}

Causes the event handler to be rebound.

Attachments (0)
Change History (2)

Changed September 27, 2011 03:56AM UTC by rwaldron comment:1

component: unfiledmanipulation
priority: undecidedlow
resolution: → invalid
status: newclosed

jQuery cannot be held accountable for what happens inside your script tags

Changed September 27, 2011 04:36AM UTC by anonymous comment:2

Replying to [comment:1 rwaldron]:

jQuery cannot be held accountable for what happens inside your script tags

A motivating example would be you've developed some kind of re-usable widget for a framework such as Django. When you actually use the widget, you want it somewhat self-contained. Additionally, the framework might dictate that this is in fact, the "proper" place to put these scripts - and I agree: any additional javascript that makes the widget work is nice to have as part of the widget's output. It works when rendered on the initial page load, it works when rendered on the server side and ajax'd into existence.

It's also nice to put this kind of javascript immediately after the element markup in order to avoid FUBC issues.

If there's a non-trivial, performant way to detect cases where you're doing things such as event binding, it *might* be nice to make this behaviour transparent rather than requiring special effort on the part of the developer - such as putting the event binding code into the a <head><script> section conditionally.

Thinking out loud.

1. Detect identical script contents and don't duplicate them.

2. Parameterize the behaviour.

3. Track the source script that caused an event handler to be bound in the first place. Don't re-execute this script the second time around. Problematic because the script might have other pieces that you want re-run when domManip is called. I can't think of when this might be.

Any of these is rife with backward compatibility concerns.

Workaround:

Clean up these event binding scripts yourself. The last action inside the script might be to remove the script tag from the dom.