Bug Tracker

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#10349 closed bug (invalid)

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

Reported by: js22@… 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.

Change History (2)

comment:1 Changed 7 years ago by Rick Waldron

Component: unfiledmanipulation
Priority: undecidedlow
Resolution: invalid
Status: newclosed

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

comment:2 in reply to:  1 Changed 7 years ago by anonymous

Replying to 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.

Note: See TracTickets for help on using tickets.