Question

我创建了一个函数，然后在页面加载时调用了这个函数，我也需要调用相同的函数，但是没有它存在两次。我希望它只是从$（function（）{}）停止并在单击一个元素时再次调用。

function myfunction(){
    console.log('message');
}

$(function(){
    myFunction();

    $('#id').click(function(){

     ...some code here ...
     myFunction();

});
})

当页面被加载时，控制台给我：“消息” - 没关系，但是当点击#id然后我得到这个消息两次，如果再次3次;

这是我的代码

function select_cta(){
    $('.cta-id').click(function(){
        console.log('-');
        $('.cta-id').removeClass('active');
        $(this).addClass('active');

        var cta_arr = parseInt($(this).attr('id').replace('cta-button-', ''))-1;

        $('.cta-image').fadeOut(300).removeClass('active');
        $('#'+$(this).attr('id').replace('cta-button', 'cta-image')).fadeIn(300).addClass('active');
        if(cta_data[cta_arr]){
            $('.cta-actions #cta_id').val(cta_data[cta_arr].id);    
        }
        else{
            $('.cta-actions #cta_id').val('');
        };

        if(cta_data[cta_arr]){          
            $('.cta-actions #cta_link').val(cta_data[cta_arr].link);
        }
        else{
            $('.cta-actions #cta_link').val('');
        };

    });

}

$(function(){

    select_cta();

    $('.add-new-cta').click(function(){
        var new_tab = parseInt($(this).prev().attr('id').replace('cta-button-',''))+1;
        $(this).before('<div id="cta-button-'+new_tab+'" class="cta-btn cta-id empty" style="display:none;"><span>'+new_tab+'</span><span class="onair">ON</span></div>');
        $('#cta-button-'+new_tab).fadeIn(300);
        $('.cta-images').append('<div id="cta-image-'+new_tab+'" class="cta-image " style="display:none"><img src="/assets/images/page/placeholder_cta.gif"></div>');

        select_cta();   

    })
});

Answer 1

您的问题是每次调用select_cta都会为每个元素添加另一个处理程序。它们都将在click事件触发时执行。两种解决方案：

在重新添加事件处理程序之前解除所有元素的绑定。为此，请使用select_cta

$('.cta-id').off("click").on("click", function(){…

更好：使用event delegation：

jQuery(function($){
    function getIdNumber($el) {
        return parseInt($el.prop('id').replace(/\D/g, ''), 10);
    }
    var $active = $('.cta-id.active'),
        $activeImg = $('.cta-image.active')

    $(document).on("click", '.cta-id', function(e) {
        $active.removeClass('active');
        $active = $(this).addClass('active');

        var num = getIdNumber($active);

        $activeImg.fadeOut(300).removeClass('active');
        $activeImg = $('#cta-image'+num).fadeIn(300).addClass('active');

        var cta_arr = num - 1;
        if(cta_arr in cta_data) {
            $('#cta_id').val(cta_data[cta_arr].id);    
            $('#cta_link').val(cta_data[cta_arr].link);
        } else {
            $('#cta_id').val('');
            $('#cta_link').val('');
        }
    });

    $('.add-new-cta').click(function(e) {
        var $this = $(this),
            new_tab = getIdNumber($this.prev())+1,
            new_button = $('<div id="cta-button-'+new_tab+'" class="cta-btn cta-id empty" style="display:none;"><span>'+new_tab+'</span><span class="onair">ON</span></div>');
        $this.before(new_button);
        new_button.fadeIn(300);
        $('.cta-images').append('<div id="cta-image-'+new_tab+'" class="cta-image " style="display:none"><img src="/assets/images/page/placeholder_cta.gif"></div>');
    })
});

JavaScript：如何停止以$（function（）{}开头的函数

1 个答案: