Jquery function works on the console, but the file does not work

Asked

Viewed 48 times

-2

So, I’m using a library of Carousel Jquery (Owl-Carousel) and some elements like this excerpt below:

<div class="owl-dots"><button role="button" class="owl-dot active"><span></span></button><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot"><span></span></button></div>

They are rendered in my source code, however I wanted to add an attribute through the setattribute() in the classes .owl-dot and did the following function:

jQuery(document).ready(function(){
    jQuery('.owl-dot').each(function(){
        this.setAttribute('arial-label','Button slide');
    });
});

But when I enter this function in the devtools console it works normally, but when I add this function in my document it doesn’t work. I saw some tutorials talking to use the function ready() when all the HTML loads the function is executed.

javascript jquery owl-carousel

  • See which point of html you are loading the jquery.js file. Note that you are not loading at the bottom of the page

  • @He was being called in the <head> , I tested putting before closing the tag <body> and it didn’t work either.

  • You don’t need to put "solved" in the title. I know it’s common in many forums, but here it works different. In your case, as you found the solution yourself, just use the field of answers below (the textarea "Your Answer"), and then mark it as accepted, That’s enough to indicate that it’s been resolved.

1 answer

0


Can solve instead of using the ready() used the (window).load that is only triggered when all content is loaded (including images, videos, etc).

jQuery(window).load(function () {
    jQuery('.owl-dot').each(function(){
        this.setAttribute('arial-label','Button slide');
    });
});

Browser other questions tagged javascript jquery owl-carousel

You are not signed in. Login or sign up in order to post.