How to insert jQuery via HTML

Asked

Viewed 5,553 times

0

My question probably has an obvious answer, but I couldn’t find it on Google.

I have a site that uses Wordpress. On the site I use a plugin that stopped working (I don’t know the reason). I discovered that the cause was a jQuery that for some reason "wasn’t being used" (I don’t know the right word for it).

I found that this was the problem after I inserted this code in the F12 console and everything worked:

jQuery(function($){
    $(document).ready(function(){
        $("h3.symple-toggle-trigger").click(function(){
            $(this).toggleClass("active").next().slideToggle("fast");
            return false;
        });
    });
});

How to get this code to be loaded along with the page without me having to insert it into the console?

jquery html

  • Can you change the HTML? If you have just open a tag script and put the code inside it, after setting the jQuery.

  • Now that I saw that you use Wordpress... in this case you will have to have access to php files of the same.

  • Maybe you’re having a conflict between jQuery(function($) {}) and the $(document).ready(function() {}), try to remove one or the other and test. If there is no conflict at all, apparently your code is already running and the problem is another.

  • The @Miguelangelo response solved my problem: Inserted an HTML in the footer with the jQuery code between <script></script> and everything worked. Thank you :-)

1 answer

2


This code is redundant. You have two options:

1. Insert this into the HTML header:

<head>
...
<script>
jQuery(function($){
    $("h3.symple-toggle-trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("fast");
        return false;
    });
});
</script>
</head>

2. (or) Insert this just before closing the body:

<body>
...
<script>
$("h3.symple-toggle-trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("fast");
    return false;
});
</script>
</body>

  • Why insert the same thing in two places?

  • Just what I needed! Thank you very much! In my case, I just entered in the footer, and it worked.

  • @Mateusflag, notice that I removed 2 lines of code in the first option, and 4 in the second. In the respective contexts, they were unnecessary.

  • @Luishenrique It’s not in two places, it’s in either. I edited it to make it clearer.

  • @Luishenrique had not noticed the change. I will change the code. Thank you for warning.

  • I guess I went unnoticed by the phrase talking about redundancy above the bold. I know and I saw the difference between the two passages, but I understood that you had said to insert both.

  • 1

    @Luishenrique It is that really the bold ones draw the most attention. So I thought better to include a "or" there in item 2. Thanks for warning!

Show 2 more comments

Browser other questions tagged jquery html

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