Question

我正在使用以下代码，以启用on - show和on - hide事件。因此，例如，当我DIV可见时，它会自动调用我的自定义函数并在此时自动对DIV进行适当的更改。

 (function ($) {
      $.each(['show', 'hide'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
          this.trigger(ev);
          return el.apply(this, arguments);
        };
      });
    })(jQuery);

问题是，当主DIV内的任何其他元素也是show()时，会调用它。

所以，当我做的时候

$('.mother').on('show',function(){
    if(...){
        $(this).find('.child').show();
    } else {
        $(this).find('.child').hide();
    }
});

的

<div class="mother">
    <div class="child"></div>
</div>

它进入无限循环，因为jQuery on()方法需要第二个参数的选择器，如果省略第二个参数或者null，它也会触发子节点上发生的事件

我无法定义第二个参数。所以制作它

$('.mother').on('show','.mother', function(){

不起作用，因为它已经是母亲......

我不想输入： if(event.target != event.delegateTarget){return;} 每个回调函数，我也不能在插件代码中执行它，因为它没有事件对象...

这些是我尝试过的。我怎么解决这个问题？可以有哪些替代方案？

我希望能够将onShow函数绑定到特定的元素，这些元素永远不会被调用在它的孩子身上发生的事件。

Answer 1

如果您希望在显示/隐藏某些元素之后运行自定义函数而不是其他元素，则不应更改$.fn.show() / .hide()本身。相反，您可以将函数作为回调参数传递给.show() / .hide()：

function custom() {console.log('custom: ', this);}

$(".mother").show(custom); // ---> custom: <HTMLElement>

请注意，在show / hide完成后执行回调。所以，如果你打电话给他们持续时间：

$(".mother").show(2000, custom);

自定义在2秒后执行。

如何为仅应用的元素为jQuery创建一个onShow onHide事件？

1 个答案: