jQuery code isn't working when loading the page

Question

I'm having an issue. I have a HTML page that has a javascript code and a jQuery code in the same script tag.

Here is my html with javascript and jQuery:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Page</title>

  <!-- css -->
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <link href="css/nivo-lightbox.css" rel="stylesheet" />
  <link href="css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css" />
  <link href="css/animate.css" rel="stylesheet" />
  <link href="css/style.css" rel="stylesheet">

  <!-- javascript and bootstrap -->
  <script src="js/jquery.min.js"></script>
  <link href="js/bootstrap.min.js" type="text/javascript">
  <link href="js/modal.js" type="text/javascript">

  <!-- template skin -->
  <link id="t-colors" href="color/default.css" rel="stylesheet">


  <script>

    <!-- HERE IS SOME PURE JAVASCRIPT CODE -->

$(document).ready(function() {
  var table = $('#tableBody tr td');

  table.on("click",function() {
    table.removeClass("test-class");
    $(this).addClass("test-class");
  });
});
</script>

My problem is: when the page loads, my jQuery function do not work, but when I copy this function and paste it on the browser's console, it works perfectly.

NOTE: when I put an alert on the browser's console it works. That means my jQuery is loading with the page.

What I am missing?

Thanks in advance.

you should be using script tags for javascript files and not link tag — Sushil
– Sushil, Commented Apr 22, 2015 at 16:23
Is there a table element on the page;.... or anything with that ID? — tymeJV
– tymeJV, Commented Apr 22, 2015 at 16:23
Pare your code down to a bare minimum that demonstrates the issue. Get rid of nivo, bootstrap, etc. and see at what point the error emerges. Can you duplicate the issue with a jsFiddle? — j08691
– j08691, Commented Apr 22, 2015 at 16:43

Hien Luong · Accepted Answer · 2015-04-22 16:47:16Z

2

try the code

$('document').on("click",'#tableBody tr td',function() {
  var table = $('#tableBody tr td');
  table.removeClass("test-class");
  $(this).addClass("test-class");
});

i dont know if td element is created in code or it is the static html. If td or table is dynamic, DOM does not know where it is because when browser runs, it always keeps record of your original html.

DOM sometimes lose its tracking, so using the format on('click','#target', func()) will make DOM go back and find for the target again.

answered Apr 22, 2015 at 16:47

Hien Luong

5201 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Serretti Over a year ago

Yeah, that's it.. It solved my problem, One more lesson learned!! my table is dynamic. Thank you very much.

unconditional · Accepted Answer · 2015-04-22 16:35:11Z

0

It's probably because the browser's Console has its own dollar sign object "$", at least Firefox and Chrome does.

From https://developer.chrome.com/devtools/docs/console :

$()

Returns the first element that matches the specified CSS selector. It is a shortcut for document.querySelector().

$$()

Returns an array of all the elements that match the specified CSS selector. This is an alias for document.querySelectorAll()

$x()

Returns an array of elements that match the specified XPath.

To check if jquery is loaded you can execute this in the browser Console:

typeof jQuery

If it's loaded the answer would be

"function"

answered Apr 22, 2015 at 16:35

unconditional

7,7641 gold badge20 silver badges33 bronze badges

2 Comments

Daniel Serretti Over a year ago

my jQuery is loaded, i have made this test.

unconditional Over a year ago

Ok, then the question is, how do you know that your jQuery code does not work? Could you put console.log('hello'); right under your line $(document).ready(function() { and check the console output ?

Collectives™ on Stack Overflow

jQuery code isn't working when loading the page

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related