jQuery事件冒泡问题与动态数据（）
我有一点jQuery，但把它放在这里是一个简化版本，以便更好地识别任何可能的故障。我在代码中提供了一些注释，以更好地突出我的尝试和问题。请在代码中找到我的评论 我的问题是“清除”按钮，清除以前单击的任何输入，而它应该只清除当前活动的输入。闻起来像是事件冒泡的问题，但我现在无法确定，所以非常感谢您的帮助 工作流程如下所示：jQuery事件冒泡问题与动态数据（）,jquery,Jquery,我有一点jQuery，但把它放在这里是一个简化版本，以便更好地识别任何可能的故障。我在代码中提供了一些注释，以更好地突出我的尝试和问题。请在代码中找到我的评论 我的问题是“清除”按钮，清除以前单击的任何输入，而它应该只清除当前活动的输入。闻起来像是事件冒泡的问题，但我现在无法确定，所以非常感谢您的帮助 工作流程如下所示： 我在.container内单击input.trigger（input[name=“a”]） 弹出/启动div#弹出窗口 我单击弹出窗口内的“清除”按钮，它确实会清除输入[nam
input[name=“a”]输入[name=“a”]input[name=“b”]输入。触发器[name=“b”]$('.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");
}
});
<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>
#popup {
background: #fff;
display: none;
height: 200px;
width: 200px;
z-index: 99999;
position: absolute;
}
$（'.container'）.off（'input.trigger'）附加到关闭按钮。我发现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();
});
});
下面是一个简单方法的工作示例：
加回光环
现在，我们可以将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();
});
});
下面是一个与原始示例更接近的工作示例：如果使用委托事件处理程序，则停止传播为时已晚，因为在调用处理程序之前，事件已向容器中冒泡。我看不到在您的代码中使用.off（）
来删除以前绑定的处理程序-您只需不断调用.on（）
即可，每次显示弹出窗口时，再次绑定越来越多的处理程序…谢谢，我更新了上述内容。.off（）被附加到Close按钮上，但恐怕它没有任何用处。但这不会清除带有currentPopup.on（'click'，'.clear'，函数（e）{…}）
的处理程序集，恐怕不会。将在弹出窗口中显示按钮事件，然后查看。谢谢按钮之所以存在，是因为页面中有3个具有相同类按钮的弹出窗口，只是根据实际活动弹出窗口的不同操作。我需要基于上下文/活动弹出窗口的轻松访问。非常感谢，请允许我花一些时间合并此内容。没问题。我修复了Blingout版本中的一个错误（刚刚更新了答案）。我有几个弹出窗口，类似的分类按钮，用于我的作业，但是你的工作没有问题。谢谢