Databases
StackOverflow2013
Postsdbo
POjQuery event bubbling issue with dynamic data()
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery event bubbling issue with dynamic data()
    text
    copied!<p>I have a bit of jQuery, but put it here a simplified version to better identify any possible glitch. I provided some comments inline the code to better highlight my attempts and also the problem. Please find my comment inline the codes.</p> <p>My problem is the "Clear" button, clears out any input previously clicked, while it should only clear the current active input. Smells like event bubbling issue, but I couldn't identify it by now, so your help is very much appreciated.</p> <p>The workflow is like this:</p> <ol> <li><p>I click input.trigger (<code>input[name="a"]</code>) inside .container</p></li> <li><p>div#popup is popped out/ launched</p></li> <li><p>I click a button "Clear" inside the #popup, it does clear the <code>input[name="a"]</code>. I do a "revert" to put back the value, good so far, if some default value is there, it reverts (this part is not included in the code, because it is not the main problem, if the following is solved). Close it. So input "a" was cleared, but later reverted with its default value via stored data-default.</p></li> <li><p>Good, so far.</p></li> <li><p>I click another input.trigger (<code>input[name="b"]</code>), #popup launched, more actions.. good, but ....</p></li> <li><p>I click "Clear" button, it clears input "a" and "b", while it is expected to clear only current <code>input.trigger[name="b"]</code> (not with previous inputs, "a").</p></li> </ol> <p>The solution <a href="https://stackoverflow.com/questions/9153501/how-do-you-stop-children-from-propagating-an-event-triggered-by-a-live-delegate">here</a> doesn't help yet.</p> <pre><code>$('.container').on('focus', 'input.trigger', function(e) { e.preventDefault(); // First fix attempt, no use // https://stackoverflow.com/questions/9153501/how-do-you-stop-children-from-propagating-an-event-triggered-by-a-live-delegate // Trying to solve problem with event bubbling, but no use if (e.target != this){ return true; } var input = $(this); // somewhere added a class focused on input focused, please ignore. // we add blur here to make any button or input inside popup clickable. $('input:not(.focused)').blur(); // Added dynamic data("popup") based on input name (a, b, c, d) $("#popup").data("popup", this.name).css({ left: "20px", top: input.offset().top + 24 + "px" }) // Second fix attempt, no use .stop(true, true) .show('slow', function () { var currentPopup = $(this), popupName = currentPopup.data("popup"), // Trying to get input/trigger name from data "popup" per clicked input name. // I tried putting this after `var input = $(this);` above but put it here later // thinking it should solve the problem, but alas not. theinput = $('input[name="' + popupName + '"]'), // Used for other dynamic interaction with some classes (.a_popup, .b_popup, etc). popupid = theinput.data('popupid'); currentPopup.on('click', '.clear', function(e) { // Third fix attempt, no use e.stopPropagation(); // The problem is here: // The button clears out any previous (opened) input.trigger, // while it should only clears the input with name == current popupName // Why this also bubbles to previously opened input.trigger "popupid" console.log(popupid); theinput.val(""); }); // More buttons here: Revert and Close. But once the "Clear" button issue is solved, this is no issue. So excluded. }); }) .on('blur', 'input.trigger', function (e) { e.preventDefault(); // no use var hidden = $("#popup"), popupName = this.name; if (hidden.data("popup") === popupName) { hidden.hide().removeData("popup"); } }); </code></pre> <p><strong>HTML:</strong></p> <pre><code>&lt;body&gt; &lt;div id="page-wrapper"&gt; &lt;div class="container"&gt; &lt;form&gt; &lt;!-- This input value is dynamically changed via other function --&gt; &lt;input class="trigger" name="a" value="one" data-popupid=".a_popup" data-default="a_value"&gt; &lt;input class="trigger" name="b" value="" data-popupid=".b_popup" data-default=""&gt; &lt;input class="trigger" name="c" value="three" data-popupid=".c_popup" data-default="c_value"&gt; &lt;input class="trigger" name="d" value="four" data-popupid=".d_popup" data-default="d_value"&gt; &lt;form&gt; &lt;!-- Ignore below divs, but here to have a general idea with above data-popid This is not directly addressed in the code above --&gt; &lt;div class="a_popup"&gt;Content&lt;/div&gt; &lt;div class="b_popup"&gt;Content&lt;/div&gt; &lt;div class="c_popup"&gt;Content&lt;/div&gt; &lt;div class="d_popup"&gt;Content&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- page wrapper --&gt; &lt;!-- This popup has data("popup") namee by above inputs (a, b, c, d) assigned dynamically --&gt; &lt;div id="popup"&gt; &lt;!-- Sometext and additional inputs --&gt; &lt;button class="revert"&gt;Revert&lt;/button&gt; &lt;button class="clear"&gt;Clear&lt;/button&gt; &lt;button class="close"&gt;Close&lt;/button&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>#popup { background: #fff; display: none; height: 200px; width: 200px; z-index: 99999; position: absolute; } </code></pre> <p>I hope I can make myself clear, but if not I will update if anything I missed from the simplified code above. Thanks for any hint to spot the actual problem.</p> <p>UPDATE: <code>$('.container').off('input.trigger');</code> is attached to Close button.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload