I am facing a puzzling issue. The code in question functions perfectly on my local server, but once I uploaded it to my hostgator server, a specific function no longer executes. When I set a breakpoint in the Firefox debugger, I noticed that the function is not triggered when I click on the element with the class deck-title. However, locally, the breakpoint does work and the function is executed.
// when click the decks, the current deck should change
$(document).ready(function() {
$(".deck-title").click(function() {
var deckTitle = $(this).text();
$("#current-deck-span").html(deckTitle);
if (deckTitle !== current_deck_global) {
var deckID = getDeckIDFromTitle(deckTitle);
updateDisplayingDeck(current_userID, deckID);
}
current_deck_global = $(this).text();
});
});
Anyone have any insights on this click(function()? Most of my other JQuery codes work fine on the hostgator server, except for this one...
Below is the code snippet from the <head> section of my web page:
<head>
<title></title>
<meta charset="utf-8"></meta>
<link href="./css/home.css" type="text/css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
I have ensured that the JQuery script is loaded before any other scripts. Hence, $(document).ready(function()) should be functional (I even tested by adding borders to all CSS elements after the document was ready, and indeed, the borders appeared).
Your suggestions and assistance are highly appreciated! Thank you!