toggleClass doesn't work

Sir Osis of Liver · October 11, 2020, 07:43:11 PM

Copied from JSFiddle, works there but not for me.



<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$("td").click(function() {
    $(this).toggleClass("focus");
    });
</script>
<style>
td {
    border-style:solid;
    border-width:medium;
    border-color:red;
    padding: 5px;
}
.focus
{
    background: yellow;
}
</style>
</head>
<body>
<table>
    <tr>
        <td>cell 1</td><td>cell 2</td>
    </tr>
    <tr>
        <td>cell 3</td><td>cell 4</td>
    </tr>
</table>

</body>
</html>

live627 · October 11, 2020, 11:05:01 PM

Try to add the JavaScript to the end of your document

Sir Osis of Liver · October 12, 2020, 12:32:26 PM

Why does that work, but not at top?

Arantor · October 12, 2020, 12:49:23 PM

Because at the time that code runs, the tds don't exist yet.

Literally that's as far as the page got - was to your script tag. When it runs at the end of the document, the tds exist at that point.

This is also what $(document).ready({ ... }) is all about - run the code once the page has loaded.

Sir Osis of Liver · October 12, 2020, 12:58:47 PM

Will have to think about that. I have js/jq running in <head> in some other scripts, must be sequence is different. But it works, thanks.

Arantor · October 12, 2020, 01:01:03 PM

Stuff that lives in <head> can work if it's wrapped in $(document).ready(), which says 'wait until the page is done loading before running the code...

Sir Osis of Liver · October 12, 2020, 01:17:20 PM

Not working for me. Brackets?

Code Select



<head>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
$(document).ready({
$("td").click(function() {
    $('*').removeClass('focus');
    $(this).toggleClass("focus");
    });
});
</script>

Arantor · October 12, 2020, 01:42:34 PM

Code Select


<head>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
$(document).ready(function(){
    $("td").click(function() {
        $('td.focus').removeClass('focus');
        $(this).addClass("focus");
    });
});
</script>

If you're already removing focus from all the relevant things, no point in a) tagging literally every single tag on the page and b) setting to toggle when you already know the outcome must be addition.

Sir Osis of Liver · October 12, 2020, 09:20:32 PM

Nice. Thanks.

News:

toggleClass doesn't work