Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove popover content with .children().detach() instead of .empty() #14244

Merged
merged 2 commits into from
Aug 19, 2014

Conversation

programcsharp
Copy link
Contributor

Using .empty() is bad because it blows up the content. If you're planning on using it later or swapping it around, you can't. jQuery won't let you reattach the content or rewire events to it. Instead, do .children().detach().

This is a refinement of the fix in #13165.

@cvrebert cvrebert added the js label Jul 25, 2014
@cvrebert cvrebert added this to the v3.2.1 milestone Jul 25, 2014
@@ -46,7 +46,8 @@
var content = this.getContent()

$tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
$tip.find('.popover-content').empty()[ // we use append for html objects to maintain js events
$tip.find('.popover-content').children().detach()
$tip.find('.popover-content')[ // we use append for html objects to maintain js events
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to split this up into separate lines, you can use .end() after the .detach() and get the original set back.

@programcsharp
Copy link
Contributor Author

Good point. Updated accordingly.

@hnrch02
Copy link
Collaborator

hnrch02 commented Aug 8, 2014

/cc @fat

fat added a commit that referenced this pull request Aug 19, 2014
Remove popover content with .children().detach() instead of .empty()
@fat fat merged commit c95aa97 into twbs:master Aug 19, 2014
@fat
Copy link
Member

fat commented Aug 19, 2014

cool thanks!

@cvrebert cvrebert mentioned this pull request Aug 23, 2014
@cvrebert
Copy link
Collaborator

@programcsharp Do you have an example of something that broke with the empty() approach? I'm trying to belatedly add a regression test for this pull request.

@programcsharp
Copy link
Contributor Author

I believe this was an issue of reuse of the same content in a popover over
multiple open/close cycles causing issues, particularly with events wired
to those elements.

Empty destroys jQuery elements in such a way that they can't properly be
readded -- even if you try to rewire events they never fire. It (and
remove) are designed to be used when the elements will never be used again.
It properly and fully destroys them to keep memory leaks from happening:
http://www.bennadel.com/blog/1822-learning-jquery-1-4-remove-vs-detach.htm

@programcsharp https://github.com/programcsharp Do you have an example of
something that broke with the empty() approach? I'm trying to belatedly add
a regression test for this pull request.


Reply to this email directly or view it on GitHub
#14244 (comment).

@programcsharp
Copy link
Contributor Author

The specific scenario was a popover using the body container layout,
triggered on click. Inside the popover was custom HTML with click handlers
wired. With the empty method, it works fine the first time and appears to
work subsequently (HTML looks fine), but click handlers never fire. I tried
rewiring them on popover show but that didn't work either.

If you can't get a repro, let me know and I'll hunt up an example.
On Dec 18, 2014 10:16 PM, "Chris Hynes" chris@programcsharp.com wrote:

I believe this was an issue of reuse of the same content in a popover over
multiple open/close cycles causing issues, particularly with events wired
to those elements.

Empty destroys jQuery elements in such a way that they can't properly be
readded -- even if you try to rewire events they never fire. It (and
remove) are designed to be used when the elements will never be used again.
It properly and fully destroys them to keep memory leaks from happening:
http://www.bennadel.com/blog/1822-learning-jquery-1-4-remove-vs-detach.htm

@programcsharp https://github.com/programcsharp Do you have an example
of something that broke with the empty() approach? I'm trying to
belatedly add a regression test for this pull request.


Reply to this email directly or view it on GitHub
#14244 (comment).

@cvrebert
Copy link
Collaborator

@programcsharp Yeah, I grok what the issue is, and tried to write a testcase, but was unable to make the test fail after reverting your fix... 😕
Would very much appreciate a concrete example using the circa-v3.2.0 popover plugin, if you have the time.

@programcsharp
Copy link
Contributor Author

Here you are: http://jsfiddle.net/1frd7kgu/

Click the "repro .empty() issue" button once. Popover comes up, button inside works. Close popover. Click button again. Button inside doesn't work now, or ever again.

@cvrebert
Copy link
Collaborator

@programcsharp Thanks a million!

cvrebert added a commit that referenced this pull request Dec 22, 2014
Special thanks to @programcsharp

[skip validator]
cvrebert added a commit that referenced this pull request Dec 30, 2014
Special thanks to @programcsharp

[skip validator]
cvrebert added a commit that referenced this pull request Dec 30, 2014
@juthilo juthilo mentioned this pull request Dec 30, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants