Question

在我的函数中，当用户更改.ap-create-story-panel-wrap div内的内容，然后在该特定div之外单击时，触发按钮单击。

作为容器变量的选择器，我正在使用data-panel属性。这适用于第一个div，但我也需要它适用于所有其他.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>

Answer 1

您可以获取已更改的输入的父元素，然后查看data-panel属性以找出触发该单击的按钮。

$('.ap-create-story-panel-wrap').change(function(e) {
  var container = $(e.target).parent();
  $(document).mouseup(function(e) {
    var dataPanelName = container.attr("data-panel");
    $(".btn-" + dataPanelName).trigger("click");
  });
});

注意：这将在文档上创建一个事件处理程序，即使触发单击后，该事件处理程序仍将保留在该事件处理程序中。因此，您可能希望在首次触发侦听器后将其删除。

最好不要触发按钮来执行某些操作，而是直接调用任何javascript。

Answer 2

不知道我是否正确理解了问题。我将尝试以我理解的方式重新表达问题陈述（我的回答将针对这种情况）。

问题：存在多个div，每个内部都有一个输入。对value的{{1}}进行的任何更改都应触发由父input定义的click上的button。

解决方案： 在每个div

中定位input

div.ap-create-story-panel-wrap

假设您还希望当用户点击$('div.ap-create-story-panel-wrap input')移至下一个click时也触发TAB事件，请听变化

input

现在，在回调函数中，从父级.on('change', function() {});获取目标btn

div

现在触发点击

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'));
    });
});

希望这会有所帮助。

Answer 3

您可以尝试使用||吗？代替&&

根据特定div类的更改触发点击-需要循环

3 个答案: