Can someone tell me why the following is not working?
<head>
<script language="javascript" src="/assets/js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$("button").bind("click", function() {
alert("You clicked " + $(this).attr("id"));
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<button id="button1">Click Me!</button> <button id="button2">Click Me!</button> <button id="button3">Click Me!</button> <button id="button4">Click Me!</button> <button id="button5">Click Me!</button>
</body>
Nothing is happening when I click on any of the buttons.
Dave
Try:
$(document).ready(function() {
$("button").bind("click", function() {
alert("You clicked " + $(this).attr("id"));
});
});
Edit:
As stated by Alex Sexton, the use of live instead of bind is also preferable when you have to apply the same function to more than 2 elements of the same type.
Follow the link for more infos, credits to him.
You need to bind the click handler when the DOM is ready:
$(function() {
$("button").bind("click", function() {
alert("You clicked " + $(this).attr("id"));
});
});
Another solution would be to use event delegation, so it doesn't matter that the buttons don't exist yet.
$("button").live("click", function() {
alert("You clicked " + $(this).attr("id"));
});
Because your javasript code is executed before html body is loaded. You should call your JS after html is fully loaded. You can do it so:
$(function() { // it's called when document loads
$("button").bind("click", function() {
alert("You clicked " + $(this).attr("id"));
});
});
But it's good practice not to inject your code into global scope. You can do it so:
(function() { // it helps you not to inject your code into global scope
$(function() { // it's called when document loads
$("button").bind("click", function() {
alert("You clicked " + $(this).attr("id"));
});
});
})();
Related
I am learning javascipt and now i have a piece of code but i am unable to get this to work, javascript isn't executed. I have already searched the web but i can't find an answer. Maybe you guys can help me with this.
HTML
<html>
<head>
<title>Text Game</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<button><span id="click">0</span></button>
</body>
</html>
Javascript
// Variables
var waarde = {
amount:2
};
$(document).ready(function() {
updateValues();
});
function updateValues() {
document.getElementById("click").innerHTML = waarde.amount;
}
$('#click').click(function() {
waarde.amount = waarde.amount + 1;
updateValues();
});
You have a couple of issues here:
Issue #1:
The element does not exist in the DOM to bind to yet, so do any or all of the following:
Move your script tag to the footer, right before the closing </body> tag (generally best practice anyway).
Use event delegation to bind to events on future elements.
Put all the JavaScript in the ready handler.
Issue #2:
You should not bind a click event handler on an element inside a button, it will not work in specification compliant browsers as the button consumes the event, and it not propagated to children.
See the HTML5 spec for button for reference:
Content model:
Phrasing content, but there must be no interactive content descendant.
Instead, bind the click event handler to the button itself.
// Variables
var waarde = {
amount: 2
};
$(document).ready(function(){
updateValues();
});
function updateValues(){
document.getElementById("click").innerHTML = waarde.amount;
}
// Binding to the button element using event delegation.
$(document).on('#button').click(function(){
waarde.amount = waarde.amount + 1;
updateValues();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button"><span id="click">0</span></button>
Also, unless you need the span element for something else, you could get rid of it and just use:
document.getElementById("button").innerHTML = waarde.amount;
You should put this code:
$('#click').click(function(){
waarde.amount = waarde.amount + 1;
updateValues();
});
Inside of $(document).ready(function(){}) function. $('#click') isn't in the DOM yet..
You have to write "Click" event in document.ready
var waarde = {
amount: 2
};
$(document).ready(function () {
$('#click').click(function () {
waarde.amount = waarde.amount + 1;
updateValues();
});
updateValues();
});
function updateValues() {
document.getElementById("click").innerHTML = waarde.amount;
}
The problem with your code is you are not assigning an event handler when javascript loads the js file. It should be called in the ready function.
var waarde = {
amount:2
};
$(document).ready(function(){
$('#click').click(function(){
waarde.amount = waarde.amount + 1;
updateValues();
});
});
function updateValues(){
document.getElementById("click").innerHTML = waarde.amount;
}
You should wrap it inside the ready method!
// Variables
var waarde = {
amount:2
};
$(document).ready(function() {
$('#click').click(function() {
waarde.amount = waarde.amount + 1;
updateValues();
});
});
function updateValues() {
document.getElementById("click").innerHTML = waarde.amount;
}
Here's a codepen link http://codepen.io/anon/pen/vKXQza
Two points:
You should put your jQuery event listener inside the document.ready.
There is no guarantee to work click event on span.
// Variables
var waarde = {
amount:2
};
$(document).ready(function(){
updateValues();
$('#click2').click(function(){
waarde.amount++;
updateValues();
});
});
function updateValues(){
document.getElementById("click2").innerHTML = waarde.amount;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id="click2">0</button>
You can see your problem solution is here
You are missing button click event in $(document).ready(function(){}(;
I don't really know how to explain this properly, but I'm learning how to use AJAX and while I've pretty much figured it out, I'm running into a problem with JQuery not referencing a call to a button that is regenerated at the end of a DIV. The reason this button is regenerated is because it's positioned inside of the div in which the content is being replaced. (In this case it's video cycling).
I've attatched a JSFiddle that shows my problem.
My javascript file is loaded at the bottom of my body, like so:
<html>
<head>
...
</head>
<body>
...
<script src="..."></script>
</body>
</html>
var i = 0;
$('#bar').on('click', function() {
i++;
$('#foo').html('<button id="bar">Test button: ' + i + '</button>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="foo">
<button id="bar">Test button: 0</button>
</div>
Because you are generating HTML dynamically with jQuery try Using event delegation :-
var i = 0;
$('#foo').on('click', '#bar' ,function() {
i++;
$('#foo').html('<button id="bar">Test button: ' + i + '</button>');
});
Or
var i = 0;
$(document.body).on('click', '#bar' ,function() {
i++;
$('#foo').html('<button id="bar">Test button: ' + i + '</button>');
});
Fiddle
Try this code
var i = 0;
$(document).on('click', '.bar' ,function() {
i = i+1;
$('#foo').html('<button class="bar">Test button: ' + i + '</button>'); // instead of .html() use .append() here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<button id="bar" class="bar">Test button: 0</button>
</div>
I have a problem.After adding a new element in the DOM, the element does not recognize old script and the same function that was in this document, how to solve this problem? how to reload the script
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id='content'>Content.....</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src='js/script.js' type='text/javascript'></script>
</body>
</html>
// script.js //
$('#content').click(function(){
$('body').append('<div id="apended">Click me!</div>');
});
$('#apended').click(function(){
alert('click!');
});
When you use .on('click', function (e) {}) function, it works only for existing elements. To handle click event on all selector elements, even for elements which will be added in future, you can use one of these functions:
$(document).on('click', "#appended", function (e) {
// some code code
alert('click!');
});
or:
$("body").delegate("#appended", "click", function () {
// your code goes here
alert('click!');
});
For more information read article about Understanding Event Delegation
Instead of click function You can use :
1.live(old version)
2.delegate
3.on
But , if you want to use click with immutation of delegate function :
var myFn=function(e){
if(e.target.id=='apended'){
alert('click');
}
}
$(document).click(myFn)
Demo :http://jsfiddle.net/abdennour/7cyjV/
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
i am building a web app. the main navigation of this web app is refreshed with jquery but after the refresh the jquery event doesnt work.
the "on button" has a jquery event bound to it with .on and everytime it is clicked it will append a paragraph. the "reset button" adds another "on button" but the jquery event doesn't apply to it.
i have used the .on method to circumvent that the second "on button" isn't in the DOM when the document is ready.
here is a simple example:
example on jsFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>blub</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".reset").click(function() {
$("nav").append('<button class="on">test</button>');
})
var count = 0;
$(".on").on("click", function(){
$(".cont").append("<p>Another paragraph! "+(++count)+"</p>");
});
});
</script>
</head>
<body>
<button class="reset">reset</button>
<nav>
<button class="on">test</button>
</nav>
<div class="cont"></div>
<script>
</script>
</body>
</html>
.on isn't a direct replacement for .live, its syntax is slightly different. If you want it to affect elements added to the DOM later, you need to use it like this:
$(document).on('click', '.on', function(){
});
The problem is hot you use method "on" try this:
<script type="text/javascript">
$(document).ready(function() {
$(".reset").click(function() {
$("nav").append('<button class="on">test</button>');
})
var count = 0;
$(document).on("click",".on", function(){
$(".cont").append("<p>Another paragraph! "+(++count)+"</p>");
});
});
</script>
DEMO
You could also do it very simply this way -- this way the click handler gets assigned to each button as it is created.
$(document).ready(function() {
var count = 0;
$(".reset").click(function() {
$("nav").append($('<button>', {
class: 'on',
html: 'test',
click: function() {
$('.cont').append('<p>Another paragraph! ' + (++count) + '</p>');
}
}));
});
});
Can someone explain why in the below code, $(document).ready(function(){ $("#msgid").html(); }); must be called before I can append to the div with my appender function? If I get rid of that part, and press the button, nothing gets appended to the div, this doesn't make sense to me! I thought JQuery's .html() method just returned the HTML contents of the div, so in my below code it would return nothing, and therefore server no purpose.
CODE:
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html(); //WHY IS THIS CODE BLOCK NECESSARY?
});
function appender(){
$(document).ready(function(){
$("#msgid").append("appended with the appender() function<br />");
});
}
</script>
This is Hello World by HTML
<div id="msgid">
</div>
<input type="button" id="myButton" value="click me" onclick=appender() />
Thanks in advance!
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html(""); //This is to clear the html code that is inside #msgid
});
function appender(){
$("#msgid").append("appended with the appender() function<br />");
});
}
</script>
This is Hello World by HTML
<div id="msgid">
</div>
<input type="button" id="myButton" value="click me" onclick=appender() />
Hope that helps
You do not need to have the $(document).ready() inside your function. But also, one of the main benefits of jQuery is its event handling, which allows you to stop using the onclick, onmouseoiver attributes in html.
Try:
$(document).ready(function(){
$("#msgid").click(function() {
//This function will be performed whenever the element with id msgid is clicked
$("#msgid").append("appended by an anonymous function attached to the click event of this element");
})
});
OR
$(document).ready(function(){
$("#msgid").click('appender');
});
function appender()
{
$("#msgid").append("appended with the appender() function<br />");
}
Both will achieve the same end, but naming a function saves repeating code as always.
You can greatly simplify your code this way.
$(function() {
$('#myButton').click(function() {
$("#msgid").append("appended with the appender() function<br />");
return false;
});
});
To do what you want , you can do as below
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html(''); //WHY IS THIS CODE BLOCK NECESSARY? to empty the contents of the div
$("#msgid").click(function() {
appender();
}); // end of click function
}); // end of document.ready
The below functions behaves like a global function and you can call it from anywhere.
function appender(){
$("#msgid").append("appended with the appender() function<br />");
}