JS/DOM issue after results are filtered in Elementor posts element.

Home Forums Product Support Forums Ajax Search Pro for WordPress Support JS/DOM issue after results are filtered in Elementor posts element.

This topic contains 3 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 1 year, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #30857
    gabe80
    gabe80
    Participant

    Hi there.
    I’m having an issue with the elementor/asp live search. I have a few simple jQuery functions that are toggling popups. Everything works fine when the page is initially generated…but when ASP filters the results the functions stop working. I’m guessing it’s some king of DOM issue…but I can’t seem to sort it out…any help would be appreciated.

    You can recreate the issue by going to fly-ti.com. When the page initially loads…you can click on the ?/X/Checkmark in the top right and it will expand the popup below the picture. As soon as you search or filter the elementor posts element…the JS stops working. If the function is called from outside of the Elementor posts element it still works…as seen by the very bottom container…which is outside of the Elementor block.

    This is the JS i’m using:

    jQuery(document).ready(function(){
        jQuery('.fly-pattern-btn').on('click', event => {
          jQuery(event.currentTarget).next().toggle();
          console.log('material stuff');
          });
    
        jQuery('.fly-box-btn').on('click', event => {
          jQuery(event.currentTarget).next().toggle();
          
        });

    Also…
    The pagination seems to break after the results are filtered…I’m not sure if that’s an asp issue or elementor.

    Thank you in advance for your time/help.

    Gabe

    #30870
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    When a DOM node changes, event handlers are usually not re-attached to the new set of items in the parent node. It is not the issue of either of the plugins. These codes will not work on any dynamically generated contents. It is possible to rewrite them in a different way, please check the Event binding on dynamically generated elements

    In you case something like this may work:

    jQuery('.elementor-element-42c810b').on('click', '.fly-pattern-btn', event => {
    	jQuery(event.currentTarget).next().toggle();
    	console.log('material stuff');
    });
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #30882
    gabe80
    gabe80
    Participant

    Hi.

    Thanks a lot. That was incredibly helpful. I figured it was an error on my part…I just couldn’t even figure out what to search for and was banging my head for two days. This article: https://learn.jquery.com/events/event-delegation/ linked off that page explained it precisely. Thanks you so much for your help…I know it was outside of the scope of your plugin.

    Gabe

    #30892
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.