在我的函数中,当用户更改.ap-create-story-panel-wrap
div内的内容,然后在该特定div之外单击时,触发按钮单击。
作为容器变量的选择器,我使用的是data-panel属性。这适用于第一个,但我也需要它适用于所有其他.ap-create-story-panel-wrap
div。
我尝试使用data属性作为选择器的循环,但是没有任何效果。
$('.ap-create-story-panel-wrap[data-panel="basicinfopanel"]').change(function() {
$(document).mouseup(function(e) {
var container = $('.ap-create-story-panel-wrap[data-panel="basicinfopanel"]');
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".btn-basicinfopanel").trigger("click");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ap-create-story-panel-wrap" data-panel="infopanel">
<input type="text">
</div>
<a class="btn-basicinfopanel" data-target="certificatepanel">Save/Next</a>
<div class="ap-create-story-panel-wrap" data-panel="certifypanel">
<input type="text">
</div>
<a class="btn-certifypanel" data-target="certifypanel">Save/Next</a>
<div class="ap-create-story-panel-wrap" data-panel="photopanel">
<input type="text">
</div>
<a class="btn-photopanel" data-target="photopanel">Save/Next</a>
最佳答案
不知道我是否正确理解了问题。我将尝试以我理解的方式重新表达问题陈述(我的回答将针对这种情况)。
问题:有多个div
,每个内部都有一个输入。对value
的input
所做的任何更改都应在父click
定义的button
上触发一个div
。
解:
定位每个input
中的div.ap-create-story-panel-wrap
$('div.ap-create-story-panel-wrap input')
假设您还希望当用户点击
click
移至下一个TAB
时也触发input
事件,请监听更改.on('change', function() {});
现在,在回调函数中,从父
div
获取目标btnlet tgt = $(this).closest('div.ap-create-story-panel-wrap').data('panel');
let bCls = '.btn-'+tgt; // btn class
现在触发点击
$(bCls).trigger('click');
所以整个事情变成了:
$('div.ap-create-story-panel-wrap input').on('change', function() {
let tgt = $(this).closest('div.ap-create-story-panel-wrap').data('panel');
let bCls = '.btn-'+tgt; // btn class
$(bCls).trigger('click');
});
让我知道,如果您不希望触发从输入中丢失焦点的单击,仅当更改后单击鼠标(我想不出原因)。
无论如何,我都不会直接将持久性
click
事件附加到document
。我宁愿像上面答案之一中建议的那样在函数末尾分离事件,或者在data-old
触发后立即在input
上添加/更新click
并在鼠标单击发生时与实际值进行比较在document
上更新:
基于评论。请参阅内联注释以获取解释(特别是,请注意
HTML
代码段第一行中的更改)。$(document).ready(function() {
// Record original value of each input. We will use it to compare with actual value later
$('div.ap-create-story-panel-wrap input').each(function() {
$(this).data('old', $(this).val());
});
// Listen to mouse click anywhere except input
$(document).mouseup(function(e) {
// Check which input value changed
$('div.ap-create-story-panel-wrap input').each(function() {
let ov = $(this).data('old');
let nv = $(this).val();
if(nv != ov) {
console.log('previous value: ',ov || "empty field");
console.log('present value: ',nv || "empty field");
// Trigger click on its btn
let tgt = $(this).closest('div.ap-create-story-panel-wrap').data('panel');
console.log('change detected in ', tgt);
let bCls = '.btn-'+tgt; // btn class
$(bCls).trigger('click');
// Update data-old to new value to prepare for any further change detection
$(this).data('old', $(this).val());
}
});
});
$('div.ap-create-story-panel-wrap').on('click', function(e) {
e.stopPropagation();
return false;
});
// Added only for demo, not needed in actual code
$('a').on('click', function() {
console.log('Target on clicked button: ', $(this).data('target'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- P.S: I changed data-panel="infopanel" to data-panel="basicinfopanel" to make it consistent with other divs -->
<div class="ap-create-story-panel-wrap" data-panel="basicinfopanel">
<input type="text">
</div>
<a class="btn-basicinfopanel" data-target="certificatepanel">Save/Next</a>
<div class="ap-create-story-panel-wrap" data-panel="certifypanel">
<input type="text">
</div>
<a class="btn-certifypanel" data-target="certifypanel">Save/Next</a>
<div class="ap-create-story-panel-wrap" data-panel="photopanel">
<input type="text">
</div>
<a class="btn-photopanel" data-target="photopanel">Save/Next</a>
希望这可以帮助。
关于jquery - 根据特定div类的更改触发点击-需要循环,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55835851/