javascript 在绑定到事件的函数前添加操作答案

【问题标题】：javascript prepending an action to a function that is bound to an eventjavascript 在绑定到事件的函数前添加操作
【发布时间】：2022-01-04 17:33:41
【问题描述】：

我有一个带有按钮的页面，我在按钮上有一个绑定，它执行一些发送一些数据的 ajax 调用。

带有绑定的代码相当通用，并在应用程序的其他几个地方重用。所以我不能改变它当前的行为（我可以用一种不会影响其他用户的方式来改变它）。

我现在需要更改使用此绑定的其中一个页面的行为（即，我不应该以破坏其他页面的方式更改绑定）。

现在我需要特定页面中的按钮不提交数据，以防不满足其他一些条件。（具体而不是提交，我需要显示一个模态，并仔细检查他们是否真的要完成提交）

我做了一个可执行的 sn-p 来解释它：

$('button').click(function (e) {
  $('ul').append('<li>submitting data</li>');
});

$('button').click(function (e) {
  if($(this).data('value') != 'ready') {
    $('ul').append('<li>condition not met, data not submitted</li>')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>
  When the button is clicked, I want the data
  to be submitted only if the condition is not met.
</p>
<p>
  In this example I need 'condition not met'
  to be printed, and not 'submitting data'.
</p>

<button data-value='not-ready'>
  content
</button>

<ul>
</ul>

我需要这个特定页面不提交数据，以防不满足条件。

我怎么能得到这个？

【问题讨论】：

你真的不应该像那样使用全局绑定。总是向相应的按钮添加一个类。您可以使用 <button class="js-global-click">...</button> 并使用 `$('button.js-global-click') 进行绑定。然后在您需要不同行为的页面上，您只需将类更改为其他内容并将事件绑定到该类 - 将不再调用全局事件，因为该类不存在。
@DonGiulio ... 处理函数真的/总是作为匿名回调直接传递给 jQuery 的 click 方法吗？
...以及如何利用jQuery 的off 方法来满足OP 的需求。
@AleksG 使用全局处理程序只是为了 jsfiddle 示例，真正的代码使用类。我不想为这个特定的按钮单独实现上传器，这是一个相当复杂的东西。我能想到的是将主要的$().click(function(e) {.... 移动到send_data = function(e){..}; and $().click(send_data);，这样我就可以在其他地方使用该功能了。

标签： javascript jquery event-handling dom-events

【解决方案1】：

不确定这是否是您要查找的内容 - 假设您可能不想更改按钮 HTML 的结构。您可以将其中一个外部容器设置为您可以测试的东西 - 然后按照这些思路，您还可以设置一个动态验证函数来调用容器内的按钮。

$('button').click(function(e) {
  if ($(this).closest('.validate-extra').length > 0) {
    if ($(this).closest('.validate-extra').data('fn')) {
      return window[$(this).closest('.validate-extra').data('fn')]();
    } else {
      console.error('no special validation function in scope!');
    }
  } else $('ul').append('<li>submitting data</li>');
});

function val1() {
  console.log('running function val1()');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>
  When the button is clicked, I want the data to be submitted only if the condition is not met.
</p>
<p>
  In this example I need 'condition not met' to be printed, and not 'submitting data'.
</p>

<button data-value='not-ready'>
  content
</button>

<div class='validate-extra' data-fn='val1'>
  <button data-value='not-ready'>
  content
</button>
</div>



<ul>
</ul>

【讨论】：

【解决方案2】：

根据 cmets 中的@aleksG 建议，我最终进行了很多更改，但主要是：

将提交数据的代码移到一个函数中，该函数可以从任何地方调用
让每个使用该函数的页面独立加载绑定（该绑定之前是全局存在的）
在新的 css 类上有一个新的绑定，该类在（最终）调用代码提交之前处理验证

这很有效，看起来很干净。

谢谢。

【讨论】：