私は少し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」ではクリアされません）。
ここでの解決策はまだ役に立ちません。
$('.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');閉じるボタンに添付されています。