PopConfirm popover doesn't dismiss when triggered from a form button inside a collapsible div

[bhall7]

Whenever a PopConfirm popover is triggered from a form button inside a collapsible/toggled <div>, the popover is not dismissed but remains:

Please see this example: http://jsfiddle.net/bhall7x/V9q5F/

(Note that I am using @PlippiePlop's fork from 4/2/14, and I am embedding the JS into the fiddle for demonstration purposes)

[bhall7]

UPDATE: When I add container: false to the settings, it resolves the issue.

See http://jsfiddle.net/bhall7x/V9q5F/6/ for an updated, resolved example.

[PlippiePlop]

It's not the popovers fault. It's your code build. Your are replacing the content of the toggle container (which contains the popover activator button) so the connected object to the popover is removed before it can find and close it by itself. See this fiddle http://jsfiddle.net/USRFobiwan/7nYZw/ for another approach to your code. It used universal popConfirm selector and attached to body.

You should in the submithandler 'detach' the popover from the content before replacing the content. in other words remove the popover container from the body.

[bhall7]

Thanks @PlippiePlop! I recognize that I am still learning and I greatly appreciate your guidance and contributions here!

Help me understand. Aside from convenience, what is the purpose of using the universal PopConfirm selector? I often need to configure different PopConfirm messages and settings which are unique to different button types. It appears that I would not be able to do this with the universal selector method you refer to here, correct? (using $('[data-pop-type="popconfirm"]').popConfirm({});)

In the submit handler, how are you detaching the popover from the toggled area before replacing the content?

My original submit handler: $(".togglePopConfirmForm").submit(function () { $(".toggleArea").html("Loading contents..."); /* Do stuff with the form data */ return false; });

Your updated submit handler: $(".togglePopConfirmForm").submit(function (e) { $(".toggleArea").find(".content-container").html("Loading contents..."); /* Do stuff with the form data */ return false; });

I'm having a hard time understanding how your submit handler is able to 'detatch' the popover from the content before replacing the content. This is likely a fundamental Javascript/jQuery principle that I still don't quite understand.

Thanks again for your help!

[PlippiePlop]

I extended Popconfirm to accept data-attributes per element that fires a confirmation. This way you can set one global for all elements that must have a confirmation. For example all elements with class='popconfirm' but you can extend the element itself to alter the options on the fly.

For example see my popconfirm.extended.js fork: https://github.com/PlippiePlop/PopConfirm