Question

I created a function and then called this function when the page loads, also I need call same the function, but without it existing twice. I want it to just stop from $(function(){}) and call again when an element is clicked on.

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

$(function(){
    myFunction();

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

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

});
})

When page is loaded the console gives me: “message” – it’s ok, but when click on #id then I get this message twice, if again then 3 times;

---

Here my code

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

Your problem that every call to select_cta adds another handler to each of the elements. They all would be executed when the click event fires. Two solutions:

• Unbind the event handlers from all elements before you re-add them. To do so, begin the function select_cta with $('.cta-id').off("click").on("click", function(){…
• Better: use 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>');
    })
});