8

this is more a strategic question than a specific one, but I think it's precisely asked so here goes:

let's say I have a page or ap that has 3 separate sections. A change on part of the form sends an ajax post to the server, and this requires a change in section two. I want to send back the re-processed HTML output of section 2, and have this replace the original state of section 2

but, section 2 has many elements that have change, click, drag etc. bindings - and from experience when I do a html replace, I lose all my bindings.

HOWEVER, this leaves me with rewriting certain things in many of the elements in section 2 individually so as not to lose the bindings.

I KNOW there's an easier approach to this, seems like a common problem. Can anyone provide me with the "aha" part of this question, and perhaps a few examples or links? I really appreciate it.

Samuel Fullman
  • 1,262
  • 1
  • 15
  • 20
  • Does the element classname or id changes after replace? – PSL May 17 '13 at 04:03
  • Since it is a dynamic section, for event bindings you can use event propagation with `$.on` but the problem is widgets like `draggable` which you talked about. ASAIK there is no way other than to re-initialize those widgets on the newly added dom elements – Arun P Johny May 17 '13 at 04:03
  • what is it in the "re-processed HTML output" that you want to keep? If it's purely the same DOM but different content then you could parse through it, updating the contents of the section. – gillyspy May 17 '13 at 04:36
  • the $.on() suggestion given below seems the best answer. I had seen that but as a immature JS programmer, hadn't understood that this applies to this situation. gillyspy, the purpose of this is to keep the process of reloading page sections as simple as possible. – Samuel Fullman May 17 '13 at 12:28

3 Answers3

8

You will need to divide the problem into two sections

Handling events
This can be done using event delegation using $.on(). ie instead of registering events on the element you register on a parent which will not be removed
Ex:

$('.container').on('click', 'a', function(){
    //do something
})

Handling widgets like draggable
Here I think you are out of luck because I don't see any other way than to reinitialize those widgets once the new dom elements are added
Ex:

var ct = $('.container').html('');
ct.find('li').draggable({})
Ian
  • 50,146
  • 13
  • 101
  • 111
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • I have to confess, I didn't even HAVE anything yet on draggable! :) I have a talent for mentioning things like that, so as soon as draggable events come up, I will remember that. Meanwhile i'll do some studying of $.on() - thanks – Samuel Fullman May 17 '13 at 12:30
6

You could use Event Delegation, so you don't have to re-bind.

mar10
  • 14,320
  • 5
  • 39
  • 64
0

From this ticket

In case anyone arrives here as I did looking for a quick alternative to replaceWith() that keeps attached events, it can be done using a combination of existing functions in the current API:

this:

old.replaceWith( new );

can be changed to:

old.before( new ).detach();

Both return a handle to the removed element, so depending on the use case it should be pretty simple to change.

David Figueras Tamame
  • 51
  • 8