Unable to do event handling using Jquery on API - javascript

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$("#myBtn").on("click",function(){
alert('myBtn Clicked');
});
</script>
</head>
<body>
<button type="button" id="myBtn">Sample</button>
</body>
</html>
For the above mentioned code click event is not firing. I used JSFiddle it works fine.
It works fine in case of delegation. The code I used for delegation is below
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).on("click","button",function(){
alert('myBtn Clicked');
});
</script>
</head>
<body>
<button type="button" id="myBtn">Sample</button>
</body>
Help me in solving this....

Read http://docs.jquery.com/How_jQuery_Works
So for you it would be:
$(document).ready(function(){
$("#myBtn").on("click",function(){
alert('myBtn Clicked');
});
});

Put your code inside document.ready()
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myBtn").on("click",function(){
alert('myBtn Clicked');
});
});
</script>
</head>
<body>
<button type="button" id="myBtn">Sample</button>
</body>
</html>
Now in second case your code worked because document is loaded first in the page and attaching may be done to it without document.ready but at that time html element may be loading so event can't be attached to them

Try to put it on Initiliaze function. Maybe javascript of jquery is not loaded
$(function () {
$(document).on("click","button',function(){
alert('myBtn Clicked');
});
});

Simples: your DOM isn't loaded yet when you are adding the listeners! Make sure the DOM is loaded first by either
use the ready event
move the script tag to the end of your body
$( document ).ready(function(e) {
// add listeners here
});

Related

Javascript and jquery wont work for some reason

Can someone help me? I wrote simple code in javascript and it wont work for some reason. I tried to figure out but i cant see why. I have downloaded jquery and it is all ok with it, also i tried only javascript code and still same problem. Browser is ok it load jquery and javascript on file i made earlier but doesnt load on this.Here is code:
<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js">
$('#btn').click(function f() {
console.log(1);
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
<head>
<title>Proba</title>
</head>
<body>
<button id="btn">Click</button>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(
console.log(1);
))
})
</script>
</body>
Try like this :)
You are binding your event handler, before the browser was able to parse your HTML. So #btn element is not in the DOM yet at this point.
Either wrap you code inside document.ready or move the script to the bottom of the body tag.
1st Approach
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function() {
$('#btn').click(function f() {
console.log(1);
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
2nd Approach
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$('#btn').click(function f() {
console.log(1);
});
</script>
</body>
Have you verified "jquery-3.3.1.js" really exists in the current directory? Try instead loading the script through a known host, like Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
EDITED: Added working code. Note button checking must be done when document has finally loaded.
<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function() {
console.log(2);
});
})
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>

call parital html page using jQuery

I want to call a partial html page using jquery. I have seen this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery-3.1.0.min.js"></script>
<script type="text/javascript"> $('#result').load('Ajax/test.html'); </script>
<title>Home</title>
</head>
<body>
<div id="result"></div>
</body>
</html>
and in the path Ajax/test.html i have this test.html:
<h1>Hey World</h1>
The problem is it does not load the Hey World into the main page. Also, there is no error in console.
What is the problem?
As with $('#result'), jQuery is unable to find the element as DOM is not ready hence jQueryObject.load method is never invoked.
Wrap your script in $(document).ready or Place your <script> as last-child of <body>(Just before closing body tag(</body>))
There are also DOMContentLoad or window.onload events which makes sure that DOM is loaded but IMO, placing <script> just before </body> is easier option.
<div id="result"></div>
<script>
$('#result').load('test.html');
</script>
You are trying to append to an element that yet does not exists.
Try adding your code in a $(document).ready(), and just before the </body> closing tag.
Like this:
<script>
$(document).ready(function(){
$('#result').load('Ajax/test.html');
});
</script>
</body>
Try changing your <script> tag to include a document.ready:
<script type="text/javascript">
$(document).ready(function () {
$('#result').load('Ajax/test.html');
});
</script>

jQuery click event not working on HTML page

I am having a lot of trouble trying to add text to an existing <p> element using jQuery. I have tried many different methods but nothing has worked so far. Here is the code for the html file:
<!doctype html>
<html>
<head>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
<body>
<button id="creategame" >Create game</button>
<p id="demo">Hello</p>
<script>
$(document).ready(function(){
$('#creategame').click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
My guess is you don't load jQuery file, and the console has
$ is not defined
error. Simply, add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
to <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
You are missing the jQuery file. Add this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> to your file above the <script src="index1.js"></script>. Make sure it's above it because if it's not then you can't call the jQuery functions in the your index1.js file.
try using the .html() function:
$("#demo").html("Test");
The following worked for me.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='createGame' class="btn btn-default">Click</button>
<p id="demo">Hello</p>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
$("#createGame").click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
You need to reference jQuery in a <script> tag somewhere.

JS commands not recognized in an external file

I'm tring to use the command innerHTML to change the text of my HTML code. it works if I put it at the HTML file, but not if I put in an external one.
The one that works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="Monkey">Monkey</p>
<script>
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
</script>
</body>
</html
Output: NoMoreMonkeys
The one that doesn't:
<!DOCTYPE html>
<html>
<head>
<script src="hello.js"></script>
</head>
<body>
<p id="Monkey">Monkey</p>
</body>
</html>
File "hello.js" :
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
Output: Monkey
Can someone help me?
You should include js before end of body,
because if js run before DOM ready, #Monkey did not exist.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="Monkey">Monkey</p>
<script src="hello.js"></script>
</body>
</html>
Or use jquery document ready:
$(document).ready(function() {
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
});
The solution is to manipulate the page, when it is safe to do.
For that add jQuery to your page and let your JS code execute, when thh document is ready.
$( document ).ready(function() {
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
});
or select element with jQuery as well:
$( document ).ready(function() {
$( "#Monkey" ).html("NoMoreMonkeys");
});

Jquery not working with phoneGap

I am using phonegap, and this code loads perfectly in my android mobile.But When i click the button it does not shows the text.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
});
</script>
</head>
<body>
<p id="test1"></p>
<button id="btn1">Set Text</button>
</body>
</html>
I don't think that JQuery is being loaded into the page.
You have referenced it as
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
which says use whatever protocol the current page is being server from. On a mobile device you are being served from file:// so the actual request the browser makes to fetch the script is:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
You need to specify the scheme you want to use or else include it in the PG project itself.
When working with mobile devices, it is greatly recommended that you use the mobile version of jquery, jquery.mobile.js
Then you can use vclick and everything works fine:
Normalized event for handling touchend or mouse click events on touch
devices.
$(document).ready(function(){
$("#btn1").vclick(function(){
$("#test1").text("Hello world!");
});
});
try using this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).on('pageinit', function(event){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js">
</script>
</head>
<body>
<p id="test1"></p>
<button id="btn1">Set Text</button>
</body>
</html>
Instead of doc ready use pageinit of jQuerymobile if developing for mobile apps.

Categories