-1

I have a problem with the function down below. The function does show/hide a div when clicking a link with the class "show-more". It also changes an icon, which works perfectly fine. Now the problem is that on the same page, there is a ajax filter (example here: https://facetwp.com/demo/cars/) and when I use this filter before, I can't click the link anymore, when clicking it it only reloads the page and not using the function anymore. Any ideas? Thanks in advance!

SOLUTION:

<script>
    jQuery(document).ready(function($) {

        $('body').on('click', 'a.show-more', function(e) {
    e.preventDefault();
                $('.show-more').toggleClass("active");
                var $this = $(this).parents('.product');
                $this.find('.productinfo').toggle(0, 'slide');
                $(this).find('.bi').toggleClass('bi-arrow-up-short')
});

});
        
    
    
</script>

jQuery(document).ready(function($) {
            $('.show-more').click(function(e) {
                e.preventDefault();
                $('.show-more').toggleClass("active");
                var $this = $(this).parents('.product');
                $this.find('.productinfo').toggle(0, 'slide');
                $(this).find('.bi').toggleClass('bi-arrow-up-short')
            });
         });

<div class="product">
    
<div class="col-one">1</div>
<div class="col-two">2</div>
<div class="col-three">3</div>
<div class="col-four">4</div>
<div class="col-five"><a href="" class="show-more">See Details <i class="bi bi-arrow-down-short"></i></a></div>

<div class="col-six productinfo">This content is originally hidden</div>
    
</div>

.productinfo {
    display: none;
}
FI_124
  • 21
  • 1
  • 4
  • Can you post the rest of your code please or make a reproducible example ? https://stackoverflow.com/help/minimal-reproducible-example – Oris Sin Apr 08 '22 at 11:15
  • How have you concluded that the problem is in the code shown and not in the "AJAX filter" (whatever that is). What debugging have you done to narrow the problem to exactly this code? When you step through this code in a debugger, which specific operation is producing an unexpected result? Please clarify the problem and/or provide a [mcve] to demonstrate the problem. – David Apr 08 '22 at 11:18
  • you probably need to embed inside a separate function that statement adding the event handler to the click event of elements collected through the .show-more selector. Then you have to recall that function anytime there's a chance that the dom was changed. Like for example after that filter function has been invoked – Diego D Apr 08 '22 at 11:20
  • 2
    More than likely you need to use a [delegated event handler](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) as you're dynamically updating the DOM content with the AJAX reqest – Rory McCrossan Apr 08 '22 at 11:21
  • Hey, I've added the basic html/css markup without the styling. As for @David, the function itself works really fine when not using the filter before, but as soon as I use the filter, the link does not work anymore and only reloads the page. – FI_124 Apr 08 '22 at 11:22
  • @FI_124: So perhaps "the filter" (whatever that is, since we can't see that code) is modifying the page in such a way that the click event handler is no longer bound to the elements? For example, if "the filter" (whatever that is, since we can't see that code) is removing these elements from the page and creating new ones then those new elements wouldn't have click handlers assigned to them. This is *most likely* a duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/q/203198/328193) – David Apr 08 '22 at 11:25
  • @David thanks for your time again. I see now - sorry for not posting the code of the filter, it's a wordpress plugin which filters pages with ajax and add's some lines to the end of the URL, so this could really be the problem here then. I will try your link and see if I can change the function, BTW, here is an example of the filter. Imagine the same filter but without the cars and my code instead, https://facetwp.com/demo/cars/ – FI_124 Apr 08 '22 at 11:31
  • Thank you @RoryMcCrossan and David I've got the solution now thanks to your help! I'll edit my post and add the solution to it! – FI_124 Apr 08 '22 at 11:49

1 Answers1

0

.click does not work on dynamically generated content . If you are creating .show-more dynamically , try this

$(document).on('click', '.show-more', function(){
           
                  //code here
         });
Arsalan Khan
  • 146
  • 8
  • Hey, thanks for your response. The link itself is not created dynamically, I've added a few lines of the html markup - or am I missing something? – FI_124 Apr 08 '22 at 11:27