PopConfirm with toggled divs

Troubleshooting PopConfirm launched from toggled divs

by Plippie Plop

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
  <div class="row">

      <div id="item1" class="item col-xs-12">
        <div class="itemSubContainer">
          <div class="row">
            <h4 class="col-xs-12 col-sm-11">Item 1</h4>
          </div>
          <div class="row">
            <div class="col-xs-12">
          	  This is a description of Item 1. Lorem ipsum dolor sit amet.
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6">
              <button type="button" data-pop-type="popconfirm" class="btn btn-default btn-PCTest">
                PopConfirm Test
              </button>
            </div>
            <div class="col-xs-6">
                <form class="toggleForm" method="post">
                  <button type="submit" class="btn btn-default">
                    Toggle This
                  </button>
                </form>
            </div>
          </div>
          <div class="row">
              <div class="toggleArea">
                  <form class="togglePopConfirmForm" method="post">
                      <button type="submit" data-pop-type="popconfirm" class="btn btn-default btn-PCToggleTest">PopConfirm Test 2</button>
                      <div class="content-container">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam diam, tincidunt in pellentesque a, molestie id elit. Fusce eleifend aliquet dui non gravida. Maecenas iaculis, augue non ornare tempus, ipsum nunc sagittis nunc, id consequat tellus massa sed velit. Sed eget nibh mollis, pulvinar sapien nec, volutpat augue. Sed vulputate odio quis metus molestie porta. Quisque molestie, nibh ac accumsan malesuada, justo lectus adipiscing ligula, id imperdiet sem velit in nisi. Vivamus scelerisque lacus ac eleifend pulvinar....

CSS

body {
  padding: 60px;
}

.item {
    margin: 10px;
    padding: 0px 10px 10px 5px;
    border: 1px solid #ddd;
    background:#fff;
    border-radius: 8px;
}

.itemSubContainer {
  margin-left: 15px;
  overflow: hidden;
}

.toggleArea {
    display: none;
    background:#eee;
    margin: 10px;
    padding: 10px;
    height:200px;
    overflow:hidden;
    overflow-y:auto;
}

JavaScript

/*!
 * PopConfirm 0.1
 * http://ifnot.github.io/PopConfirm/
 *
 * Use jQuery & Bootstrap
 * http://jquery.com/
 * http://getbootstrap.com/
 *
 * Copyright 2014 Anael Favre and other contributors
 * Released under the MIT license
 * https://raw.github.com/AnaelFavre/PopConfirm/master/LICENCE
 */

(function($){
	$.fn.extend({
		popConfirm: function(options) {
			var defaults = {
				title: 'Confirmation',
				content: 'Are you really sure ?',
				placement: 'right',
				container: 'body',
				yesBtn:   'Yes',
				noBtn:    'No'
			};
			var options =  $.extend(defaults, options);
			var last = null;
			
			return this.each(function() {
				var self = $(this);
				var arrayActions = [];
				
				// If there are jquery click events
				if (typeof(jQuery._data(this, "events")) != "undefined" && typeof(jQuery._data(this, "events")['click']) != "undefined") {
					
					// Save all click handlers
					for (var i = 0; i < jQuery._data(this, "events")['click'].length; i++) {
						arrayActions.push(jQuery._data(this, "events")['click'][i].handler);
					}
					
					// unbind it to prevent it firing
					$(self).unbind("click");
				}
				
				// If there are hard onclick attribute
				if(typeof self.attr('onclick') != 'undefined') {
					// Extracting the onclick code to evaluate and bring it into a closure
					var code = self.attr('onclick');
					arrayActions.push(function() {
						eval(code);
					});
					$(self).removeAttr('onclick');
				}
				
				// If there are href link defined
				if(typeof self.attr('href') != 'undefined') {
					// Assume there is a href attribute to redirect to
					arrayActions.push(function() {
						window.location.href = self.attr('href');
					});
				}
				
				// If the button is a submit one
				if(typeof self.attr('type') != 'undefined' && self.attr('type') == 'submit') {
					// Get the form related to this button then store submiting in closure
					var form = $(this).parents('form:first');
					arrayActions.push(function()...