[wp-trac] [WordPress Trac] #27491: Widget Customizer: Dynamically-created inputs cause from to replace itself without event to trigger re-initialization

[WordPress Trac]

#27491: Widget Customizer: Dynamically-created inputs cause from to replace itself
without event to trigger re-initialization
--------------------------+-------------------------
 Reporter:  westonruter   |       Owner:  ocean90
     Type:  defect (bug)  |      Status:  reviewing
 Priority:  normal        |   Milestone:  3.9
Component:  Widgets       |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  javascript
--------------------------+-------------------------

Comment (by westonruter):

 Replying to [comment:6 ocean90]:
 > > Provided an example plugin which incorporates Chosen...
 > Thanks, looks good. But it seems like Chosen isn't usable until the form
 gets updated once.

 OK, the primary problem here is newly added widgets are added by grabbing
 the HTML for the widget template and then replacing `__i__` with the
 widget number, and then inserting the HTML into the document. So any event
 handlers added directly to the widget template itself will not be carried
 over to the newly-added widget. This is the same behavior as on the
 widgets admin page. I realize this is why event delegation has been so
 critical for any listening to any events on widget fields.

 But any elements which have events or `data` attached directly to them are
 currently broken both for newly-added widgets on the widgets admin page
 and in the customizer alike.

 By the way, with Chosen I tried changing the customizer widget addition
 method to use `jQuery.clone( deep )` instead of manipulating the HTML of
 the widget template, but this also is failing in the case of Chosen
 because it seems it is not designed to be cloned:
 http://stackoverflow.com/a/17156928/93579

 So, I think what should be done is we should stop rendering out the widget
 template as HTML and instead include it on the page in an unparsed form
 (e.g. in a `data` attribute). Then when the widget is added apply trigger
 a `widget-added` event (or `widget-form-rendered` to also be used when
 updates happen) so that any event handlers and dynamic fields can be
 initialized. This should be done on both the Customizer and the Widgets
 Admin page to handle setup for newly added widgets.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/27491#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform