在我的函数中,当用户更改.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,每个内部都有一个输入。对valueinput所做的任何更改都应在父click定义的button上触发一个div

解:
定位每个input中的div.ap-create-story-panel-wrap

$('div.ap-create-story-panel-wrap input')


假设您还希望当用户点击click移至下一个TAB时也触发input事件,请监听更改

.on('change', function() {});


现在,在回调函数中,从父div获取目标btn

let 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/

10-14 18:10
查看更多