jquery - 如何在点击时触发自定义事件

Question

这是一个有点构建的问题，希望能教会我编写更易于维护的 jQuery。

我有一个按钮，它应该可以滑动切换另一个元素。

我知道我可以这样做：

$('.button').click(function(){
  $('.other-element').slideToggle();
});

但是，我想在单击 .button 时触发一个事件，然后在 .other-element 上“捕获”该事件。我以为我可以这样做：

$('.button').click(function(){
  $(this).trigger('customEvent');
});

$('.other-element').on('customEvent', function() {
  $(this).slideToggle();
});

这个 ofc 会导致更多的代码，在这个特定的例子中，它可能不是一个好主意，但我喜欢事件触发和捕获之间的划分。

我该如何以正确的方式做到这一点？

Answer 1

你在找这个吗？

$('.button').click(function(){
  $('.other-element').trigger('customEvent');
});

$('.other-element').on('customEvent', function() {
  $(this).slideToggle();
});

Answer 2

您需要customEvent为您的.other-element元素触发，而不是button：

$('.button').on('click', function(){
    $('.other-element').trigger('customEvent');
});