CODEWITHSUNDEEP
javascriptjqueryhtml
Daniel Serretti
Daniel Serretti

Reputation: 342

jQuery code isn't working when loading the page

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.

Upvotes: 0

Views: 275

Answers (2)

Hien Luong
Hien Luong

Reputation: 520

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.

Upvotes: 2

unconditional
unconditional

Reputation: 7656

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"

Upvotes: 0

Related Questions