使用on(' click ')而不是click

Question

在有人建议我提出一个更有针对性的问题后，我有了这个问题。

目前我有以下代码

omShortcodes.modules.toggle = {
init: function() {

jQuery('.omsc-accordion .omsc-toggle').addClass('omsc-in-accordion').find('.omsc-toggle-title').click(function(){

    var $toggle=jQuery(this).parent();

    if($toggle.hasClass('omsc-expanded')) {
        $toggle.removeClass('omsc-expanded');
        $toggle.find('.omsc-toggle-inner').slideUp(300);
        return false;
    }

    var $acc=$toggle.parents('.omsc-accordion');
    if(!$acc.hasClass('omsc-multiopen'))
        $acc.find('.omsc-toggle.omsc-expanded').removeClass('omsc-expanded').find('.omsc-toggle-inner').slideUp(300);

    $toggle.find('.omsc-toggle-inner').slideDown(300,function(){
        var h=jQuery(this).parent().height();
        var pos=jQuery(this).parent().find('.omsc-toggle-title').offset();
        var scroll=jQuery(window).scrollTop();
        var wh=jQuery(window).height();
        if(pos.top < scroll || (pos.top > scroll && pos.top+h > scroll+wh))
            jQuery('html,body').animate({ scrollTop: pos.top+'px' }, 200);
    }).find('iframe[src*="maps.google"]').each(function(){
        jQuery(this).attr('src',jQuery(this).attr('src'));
    });
    $toggle.addClass('omsc-expanded');

});

jQuery('.omsc-toggle').not('.in-accordion').find('.omsc-toggle-title').click(function(){

    var $toggle=jQuery(this).parent();

    var $inner=$toggle.find('.omsc-toggle-inner');
    if(!$inner.length)
        return false;
    if($inner.is(':animated'))
        return false;

    $toggle.toggleClass('omsc-expanded');
    $inner.slideToggle(300);
    if($toggle.hasClass('omsc-expanded')) {
        $inner.find('iframe[src*="maps.google"]').each(function(){
            jQuery(this).attr('src',jQuery(this).attr('src'));
        });
    }

    return false;
    });

   }
   }

但它不适用于AJAX，只有在直接加载页面时才能使用。

有人建议我使用on(' click ')而不是click。

我试过了

        jQuery('.omsc-accordion .omsc-toggle').addClass('omsc-in-accordion').find('.omsc-toggle-title').on('click', '.omsc-accordion', function(){

        jQuery('.omsc-accordion .omsc-toggle').addClass('omsc-in-accordion').find('.omsc-toggle-title').on('click', 'omsc-accordion', function(){

        jQuery('.omsc-accordion .omsc-toggle').addClass('omsc-in-accordion').find('.omsc-toggle-title').on('click', '.omsc-accordion .omsc-toggle', function(){

但这三个都让它什么也做不了。我是否错误地实现了这一点？

Answer 1

jQuery('.omsc-toggle').not('.in-accordion').find('.omsc-toggle-title').click只会将单击处理程序附加到加载页面时存在的事件上。要将处理程序附加到未来的元素，请使用on的委托特性。

jQuery('#container').on('click', '.omsc-toggle:not(.in-accordion) .omsc-toggle-title', function() {
  console.log('clicked!');
});

其中#container是包含所有.omsc-toggle元素的元素。不建议将事件处理程序附加到$(document)。