加回bling

Question

我有一些jQuery，但在这里放一个简化版本，以更好地识别任何可能的故障。我提供了一些评论内联代码，以更好地突出我的尝试和问题。请查看我的评论内联代码。

我的问题是“清除”按钮，清除以前点击的任何输入，而它应该只清除当前的活动输入。闻起来就像是事件冒泡问题，但我现在无法识别它，所以非常感谢你的帮助。

工作流程如下：

我点击.container中的input.trigger（input[name="a"]）
div＃popup弹出/启动
我点击了#popup中的“清除”按钮，它确实清除了input[name="a"]。我做了一个“恢复”以放回值，好到目前为止，如果有一些默认值，它会恢复（这部分不包含在代码中，因为它不是主要问题，如果以下内容得到解决）。关闭它。因此输入“a”被清除，但后来通过存储的数据默认值恢复其默认值。
好，到目前为止。
我点击了另一个input.trigger（input[name="b"]），＃popup已启动，更多动作......很好，但......
我单击“清除”按钮，它会清除输入“a”和“b”，而预期只清除当前input.trigger[name="b"]（不包含以前的输入，“a”）。

解决方案here尚未提供帮助。

$('.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");
  }
});

HTML：

<body>
<div id="page-wrapper">
  <div class="container">
    <form>
      <!-- This input value is dynamically changed via other function -->
      <input class="trigger" name="a" value="one" data-popupid=".a_popup" data-default="a_value">
      <input class="trigger" name="b" value="" data-popupid=".b_popup" data-default="">
      <input class="trigger" name="c" value="three" data-popupid=".c_popup" data-default="c_value">
      <input class="trigger" name="d" value="four" data-popupid=".d_popup" data-default="d_value">
    <form>

    <!-- Ignore below divs, but here to have a general idea with above data-popid 
      This is not directly addressed in the code above -->
    <div class="a_popup">Content</div>
    <div class="b_popup">Content</div>
    <div class="c_popup">Content</div>
    <div class="d_popup">Content</div>
  </div>
</div><!-- page wrapper -->

<!-- This popup has data("popup") namee by above inputs (a, b, c, d) assigned dynamically -->
<div id="popup">
  <!-- Sometext and additional inputs -->
  <button class="revert">Revert</button>
  <button class="clear">Clear</button>
  <button class="close">Close</button>
</div> 
</body>

CSS：

#popup {
  background: #fff;
  display: none;
  height: 200px;
  width: 200px;
  z-index: 99999;
  position: absolute;
}

我希望我能说清楚，但如果没有，我会更新我从上面的简化代码遗漏的任何内容。感谢任何提示发现实际问题。

更新： $('.container').off('input.trigger');附加到关闭按钮。

Answer 1

我发现JavaScript过于复杂且难以理解。所以，让我们简单一点：

$(document).ready(function() {
    $('.container').on('focus', 'input.trigger', function(e) {
        var input = $(this);
        var position = input.position();

        $("#popup")
            .data('target', $(e.target))
            .css('top', position.top + 24)
            .css('left', position.left + 20)
            .show();
     });

    $('.clear').on('click', function(e) {
        e.preventDefault();
        var input = $(e.target).closest('#popup').data('target');
        input.val('');
        $(e.target).closest('#popup').hide();
    });
    $('.revert').on('click', function(e) {
        e.preventDefault();
        $(e.target).closest('#popup').hide();
    });
    $('.close').on('click', function(e) {
        e.preventDefault();
        $(e.target).closest('#popup').hide();
    });
});

以下是这种简单方法的一个有效例子：http://jsfiddle.net/UZ4QM/

加回bling

现在我们可以添加bling：

$(document).ready(function() {
    $('.container')
        .on('focus', 'input.trigger', function(e) {
            var input = $(this);
            var position = input.position();

            $("#popup")
                .data('target', $(e.target))
                .css({'top':  position.top + 24,
                      'left': position.left + 20 })
                .show('slow');
         })
        .on('blur', 'input.trigger', function(e) {
            $("#popup").hide();
        });

    $('.clear').on('click', function(e) {
        e.preventDefault();
        var input = $(e.target).closest('#popup').data('target');
        input.val('');
        $(e.target).closest('#popup').hide();
    });
    $('.revert').on('click', function(e) {
        e.preventDefault();
        $(e.target).closest('#popup').hide();
    });
    $('.close').on('click', function(e) {
        e.preventDefault();
        $(e.target).closest('#popup').hide();
    });
});

这是一个有效的例子，它更接近原作：http://jsfiddle.net/C9JM5/

动态数据的jQuery事件冒泡问题（）

1 个答案:

加回bling