JQuery Error in theme for .live is not a function

I am trying to figure out how to fix an error the Chrome console revealed for the theme I use that has been there for quite some time. I don’t know javascript so not sure how to fix it, after some research and reading my only guess is .live should be .on as per the error it is using JQuery 1.12.4 and I read .live was removed starting in version 1.9. I posted on the theme makers forum, but I figure I would get help quicker here. Here is the code block the error points to, it points to “.live(‘click’, function(event){” but includes the whole section, I did notice a missing } at the end as well, I left the block below exactly how it is in the functions.js file.

$('.hm_icon_search > a, .top_add_card').live('click', function(event){

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

var $this_btn = $(this);

var $target_block = $this_btn.siblings('div');

event.preventDefault();

event.stopPropagation();

if(parent.hasClass('active') && $target_block.hasClass('hm_active_prep')){

$target_block.fadeOut(function(){

    parent.removeClass('active');
    }
 }

});

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If you asking what is the replacement for .live() it’s .on()`, for enabling event handling for dynamically added elements and that’s how you would use it.

$(document).on("click","#test-element",function() {});

so for your code.

$('body').on('click', '.top_add_card', function(event){

    var parent = $(this).parent();
    var $this_btn = $(this);
    var $target_block = $this_btn.siblings('div');
    
    event.preventDefault();
    event.stopPropagation();
    
    if(parent.hasClass('active') && $target_block.hasClass('hm_active_prep')){
        $target_block.fadeOut(function(){
            parent.removeClass('active');
        }
    }
});

This would work for dynamically adding elements too. because thats the main purpose of using .on(). read more about it here. https://api.jquery.com/on/

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0