Why event not firing (jquery)
I have a main page, with 2 buttons (each button refer to another page):
<html>
<head>
<title>TBD</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<button id="A">A</button>
<button id="B">B</button>
</body>
</html>
login.js:
$(document).ready(function(){
$("#A").click(function(){
$.get( "/A.html", function( data ) {
console.log("A button clicked");
document.write(data);
});
});
$("#B").click(function(){
$.get( "/B.html", function( data ) {
console.log("B button clicked");
document.write(data);
});
});
});
A and B (HTMLs and JSs) have the same behavior:
for example (B.html & B.js):
<html>
<head>
<title>B</title>
<script type="text/javascript" src="js/B.js"></script>
</head>
<body>
B
<button id="backButton">Back</button>
</body>
</html>
$(document).ready(function(){
console.log("B js ready");
$("#backButton").click(function(){
console.log("back button clicked");
$.get( "/back.html", function( data ) {
console.log("get results");
document.write(data);
});
});
});
I when I clicked from main page on A or B button and get to the new page,
I can see in the Console log that the A.js (or B.js) are ready (so the A.js or B.js are loaded),
But after it , if I click on the "back" button, nothing happen (even the line console.log("back button clicked"); is not called.
Why this happen and how to fix it ?
javascript jquery
asked Nov 23 '18 at 19:17
user3668129user3668129
89411228
add a comment |
I have a main page, with 2 buttons (each button refer to another page):
<html>
<head>
<title>TBD</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<button id="A">A</button>
<button id="B">B</button>
</body>
</html>
login.js:
$(document).ready(function(){
$("#A").click(function(){
$.get( "/A.html", function( data ) {
console.log("A button clicked");
document.write(data);
});
});
$("#B").click(function(){
$.get( "/B.html", function( data ) {
console.log("B button clicked");
document.write(data);
});
});
});
A and B (HTMLs and JSs) have the same behavior:
for example (B.html & B.js):
<html>
<head>
<title>B</title>
<script type="text/javascript" src="js/B.js"></script>
</head>
<body>
B
<button id="backButton">Back</button>
</body>
</html>
$(document).ready(function(){
console.log("B js ready");
$("#backButton").click(function(){
console.log("back button clicked");
$.get( "/back.html", function( data ) {
console.log("get results");
document.write(data);
});
});
});
I when I clicked from main page on A or B button and get to the new page,
I can see in the Console log that the A.js (or B.js) are ready (so the A.js or B.js are loaded),
But after it , if I click on the "back" button, nothing happen (even the line console.log("back button clicked"); is not called.
Why this happen and how to fix it ?
javascript jquery
asked Nov 23 '18 at 19:17
user3668129user3668129
89411228
add a comment |
I have a main page, with 2 buttons (each button refer to another page):
<html>
<head>
<title>TBD</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<button id="A">A</button>
<button id="B">B</button>
</body>
</html>
login.js:
$(document).ready(function(){
$("#A").click(function(){
$.get( "/A.html", function( data ) {
console.log("A button clicked");
document.write(data);
});
});
$("#B").click(function(){
$.get( "/B.html", function( data ) {
console.log("B button clicked");
document.write(data);
});
});
});
A and B (HTMLs and JSs) have the same behavior:
for example (B.html & B.js):
<html>
<head>
<title>B</title>
<script type="text/javascript" src="js/B.js"></script>
</head>
<body>
B
<button id="backButton">Back</button>
</body>
</html>
$(document).ready(function(){
console.log("B js ready");
$("#backButton").click(function(){
console.log("back button clicked");
$.get( "/back.html", function( data ) {
console.log("get results");
document.write(data);
});
});
});
I when I clicked from main page on A or B button and get to the new page,
I can see in the Console log that the A.js (or B.js) are ready (so the A.js or B.js are loaded),
But after it , if I click on the "back" button, nothing happen (even the line console.log("back button clicked"); is not called.
Why this happen and how to fix it ?
javascript jquery
asked Nov 23 '18 at 19:17
user3668129user3668129
89411228
I have a main page, with 2 buttons (each button refer to another page):
<html>
<head>
<title>TBD</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<button id="A">A</button>
<button id="B">B</button>
</body>
</html>
login.js:
$(document).ready(function(){
$("#A").click(function(){
$.get( "/A.html", function( data ) {
console.log("A button clicked");
document.write(data);
});
});
$("#B").click(function(){
$.get( "/B.html", function( data ) {
console.log("B button clicked");
document.write(data);
});
});
});
A and B (HTMLs and JSs) have the same behavior:
for example (B.html & B.js):
<html>
<head>
<title>B</title>
<script type="text/javascript" src="js/B.js"></script>
</head>
<body>
B
<button id="backButton">Back</button>
</body>
</html>
$(document).ready(function(){
console.log("B js ready");
$("#backButton").click(function(){
console.log("back button clicked");
$.get( "/back.html", function( data ) {
console.log("get results");
document.write(data);
});
});
});
I when I clicked from main page on A or B button and get to the new page,
I can see in the Console log that the A.js (or B.js) are ready (so the A.js or B.js are loaded),
But after it , if I click on the "back" button, nothing happen (even the line console.log("back button clicked"); is not called.
Why this happen and how to fix it ?
javascript jquery
javascript jquery
asked Nov 23 '18 at 19:17
user3668129user3668129
89411228
asked Nov 23 '18 at 19:17
user3668129user3668129
89411228
asked Nov 23 '18 at 19:17
user3668129user3668129
89411228
asked Nov 23 '18 at 19:17
user3668129user3668129
89411228
asked Nov 23 '18 at 19:17
user3668129user3668129
89411228
89411228
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Try this way... it worked for me... you need to add the jquery.min.js library link in the second page.
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> //add it
</script>
</header>
<body >
B
<button id="backButton">Back</button>
<script type="text/javascript" src="js/B.js"></script> // add the line here
</body>
</html>
answered Nov 23 '18 at 19:42
Fathma siddiqueFathma siddique
887
It doesn't help. I see the following warning on the console login.js:14 A parser-blocking, cross site (i.e. different eTLD+1) script, ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See chromestatus.com/feature/5718547946799104 for more details.
– user3668129
Nov 23 '18 at 19:53
add a comment |
You need to move your script tag to the end of your html tag, so the page will render before the javascript call.
<html>
<head>
<title>B</title>
</head>
<body>
B <button id="backButton">Back</button>
<script type="text/javascript" src="js/B.js"></script> //add script line here!
</body>
</html>
To show the rendering problem, place the script tag right before the head tag and add a debugger in your B.js file and run the page with the developer tool open.
$(document).ready(function() {
debugger; // Add debugger here!
console.log('B js ready');
$('#backButton').on('click', function() {
console.log('back button clicked');
$.get('/back.html', function(data) {
console.log('get results');
document.write(data);
});
});
});
When you load the page B you will see that the button doesn't exist yet, so the script can't bind the click event.
answered Nov 23 '18 at 19:35
Gustavo PereiraGustavo Pereira
12
Doesn't help...
– user3668129
Nov 23 '18 at 19:49
The problem happens because the $ (document).ready fires before the page rendering, this probably happens because the script thinks that the page is already ready, since you just changed the document content with javascript. I've improved my answer to better show you.
– Gustavo Pereira
Nov 24 '18 at 12:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451953%2fwhy-event-not-firing-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try this way... it worked for me... you need to add the jquery.min.js library link in the second page.
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> //add it
</script>
</header>
<body >
B
<button id="backButton">Back</button>
<script type="text/javascript" src="js/B.js"></script> // add the line here
</body>
</html>
answered Nov 23 '18 at 19:42
Fathma siddiqueFathma siddique
887
It doesn't help. I see the following warning on the console login.js:14 A parser-blocking, cross site (i.e. different eTLD+1) script, ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See chromestatus.com/feature/5718547946799104 for more details.
– user3668129
Nov 23 '18 at 19:53
add a comment |
Try this way... it worked for me... you need to add the jquery.min.js library link in the second page.
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> //add it
</script>
</header>
<body >
B
<button id="backButton">Back</button>
<script type="text/javascript" src="js/B.js"></script> // add the line here
</body>
</html>
answered Nov 23 '18 at 19:42
Fathma siddiqueFathma siddique
887
It doesn't help. I see the following warning on the console login.js:14 A parser-blocking, cross site (i.e. different eTLD+1) script, ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See chromestatus.com/feature/5718547946799104 for more details.
– user3668129
Nov 23 '18 at 19:53
add a comment |
Try this way... it worked for me... you need to add the jquery.min.js library link in the second page.
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> //add it
</script>
</header>
<body >
B
<button id="backButton">Back</button>
<script type="text/javascript" src="js/B.js"></script> // add the line here
</body>
</html>
answered Nov 23 '18 at 19:42
Fathma siddiqueFathma siddique
887
Try this way... it worked for me... you need to add the jquery.min.js library link in the second page.
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> //add it
</script>
</header>
<body >
B
<button id="backButton">Back</button>
<script type="text/javascript" src="js/B.js"></script> // add the line here
</body>
</html>
answered Nov 23 '18 at 19:42
Fathma siddiqueFathma siddique
887
edited Nov 23 '18 at 19:47
answered Nov 23 '18 at 19:42
Fathma siddiqueFathma siddique
887
answered Nov 23 '18 at 19:42
Fathma siddiqueFathma siddique
887
answered Nov 23 '18 at 19:42
Fathma siddiqueFathma siddique
887
887
It doesn't help. I see the following warning on the console login.js:14 A parser-blocking, cross site (i.e. different eTLD+1) script, ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See chromestatus.com/feature/5718547946799104 for more details.
– user3668129
Nov 23 '18 at 19:53
add a comment |
It doesn't help. I see the following warning on the console login.js:14 A parser-blocking, cross site (i.e. different eTLD+1) script, ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See chromestatus.com/feature/5718547946799104 for more details.
– user3668129
Nov 23 '18 at 19:53
It doesn't help. I see the following warning on the console login.js:14 A parser-blocking, cross site (i.e. different eTLD+1) script, ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See chromestatus.com/feature/5718547946799104 for more details.
– user3668129
Nov 23 '18 at 19:53
It doesn't help. I see the following warning on the console login.js:14 A parser-blocking, cross site (i.e. different eTLD+1) script, ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See chromestatus.com/feature/5718547946799104 for more details.
– user3668129
Nov 23 '18 at 19:53
add a comment |
You need to move your script tag to the end of your html tag, so the page will render before the javascript call.
<html>
<head>
<title>B</title>
</head>
<body>
B <button id="backButton">Back</button>
<script type="text/javascript" src="js/B.js"></script> //add script line here!
</body>
</html>
To show the rendering problem, place the script tag right before the head tag and add a debugger in your B.js file and run the page with the developer tool open.
$(document).ready(function() {
debugger; // Add debugger here!
console.log('B js ready');
$('#backButton').on('click', function() {
console.log('back button clicked');
$.get('/back.html', function(data) {
console.log('get results');
document.write(data);
});
});
});
When you load the page B you will see that the button doesn't exist yet, so the script can't bind the click event.
answered Nov 23 '18 at 19:35
Gustavo PereiraGustavo Pereira
12
Doesn't help...
– user3668129
Nov 23 '18 at 19:49
The problem happens because the $ (document).ready fires before the page rendering, this probably happens because the script thinks that the page is already ready, since you just changed the document content with javascript. I've improved my answer to better show you.
– Gustavo Pereira
Nov 24 '18 at 12:54
add a comment |
You need to move your script tag to the end of your html tag, so the page will render before the javascript call.
<html>
<head>
<title>B</title>
</head>
<body>
B <button id="backButton">Back</button>
<script type="text/javascript" src="js/B.js"></script> //add script line here!
</body>
</html>
To show the rendering problem, place the script tag right before the head tag and add a debugger in your B.js file and run the page with the developer tool open.
$(document).ready(function() {
debugger; // Add debugger here!
console.log('B js ready');
$('#backButton').on('click', function() {
console.log('back button clicked');
$.get('/back.html', function(data) {
console.log('get results');
document.write(data);
});
});
});
When you load the page B you will see that the button doesn't exist yet, so the script can't bind the click event.
answered Nov 23 '18 at 19:35
Gustavo PereiraGustavo Pereira
12
Doesn't help...
– user3668129
Nov 23 '18 at 19:49
The problem happens because the $ (document).ready fires before the page rendering, this probably happens because the script thinks that the page is already ready, since you just changed the document content with javascript. I've improved my answer to better show you.
– Gustavo Pereira
Nov 24 '18 at 12:54
add a comment |
You need to move your script tag to the end of your html tag, so the page will render before the javascript call.
<html>
<head>
<title>B</title>
</head>
<body>
B <button id="backButton">Back</button>
<script type="text/javascript" src="js/B.js"></script> //add script line here!
</body>
</html>
To show the rendering problem, place the script tag right before the head tag and add a debugger in your B.js file and run the page with the developer tool open.
$(document).ready(function() {
debugger; // Add debugger here!
console.log('B js ready');
$('#backButton').on('click', function() {
console.log('back button clicked');
$.get('/back.html', function(data) {
console.log('get results');
document.write(data);
});
});
});
When you load the page B you will see that the button doesn't exist yet, so the script can't bind the click event.
answered Nov 23 '18 at 19:35
Gustavo PereiraGustavo Pereira
12
You need to move your script tag to the end of your html tag, so the page will render before the javascript call.
<html>
<head>
<title>B</title>
</head>
<body>
B <button id="backButton">Back</button>
<script type="text/javascript" src="js/B.js"></script> //add script line here!
</body>
</html>
To show the rendering problem, place the script tag right before the head tag and add a debugger in your B.js file and run the page with the developer tool open.
$(document).ready(function() {
debugger; // Add debugger here!
console.log('B js ready');
$('#backButton').on('click', function() {
console.log('back button clicked');
$.get('/back.html', function(data) {
console.log('get results');
document.write(data);
});
});
});
When you load the page B you will see that the button doesn't exist yet, so the script can't bind the click event.
answered Nov 23 '18 at 19:35
Gustavo PereiraGustavo Pereira
12
edited Nov 24 '18 at 12:49
answered Nov 23 '18 at 19:35
Gustavo PereiraGustavo Pereira
12
answered Nov 23 '18 at 19:35
Gustavo PereiraGustavo Pereira
12
answered Nov 23 '18 at 19:35
Gustavo PereiraGustavo Pereira
12
12
Doesn't help...
– user3668129
Nov 23 '18 at 19:49
The problem happens because the $ (document).ready fires before the page rendering, this probably happens because the script thinks that the page is already ready, since you just changed the document content with javascript. I've improved my answer to better show you.
– Gustavo Pereira
Nov 24 '18 at 12:54
add a comment |
Doesn't help...
– user3668129
Nov 23 '18 at 19:49
The problem happens because the $ (document).ready fires before the page rendering, this probably happens because the script thinks that the page is already ready, since you just changed the document content with javascript. I've improved my answer to better show you.
– Gustavo Pereira
Nov 24 '18 at 12:54
Doesn't help...
– user3668129
Nov 23 '18 at 19:49
Doesn't help...
– user3668129
Nov 23 '18 at 19:49
The problem happens because the $ (document).ready fires before the page rendering, this probably happens because the script thinks that the page is already ready, since you just changed the document content with javascript. I've improved my answer to better show you.
– Gustavo Pereira
Nov 24 '18 at 12:54
The problem happens because the $ (document).ready fires before the page rendering, this probably happens because the script thinks that the page is already ready, since you just changed the document content with javascript. I've improved my answer to better show you.
– Gustavo Pereira
Nov 24 '18 at 12:54
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451953%2fwhy-event-not-firing-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
