Using JQuery, I need to write a function, called on click for any of the two buttons (edit0, edit1).
I have the following code:
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
</body>
</html>
When I run it, nothing happens on button click.
I tried to replace the script with:
$('button[class="edit"]').click(function() {
alert('1111');
});
But the result is the same.
You can simply use CSS3 [attribute^=value] Selector to implement 'click event on all buttons with id starting with custom text' as you wish, like below.
$('button[id^="edit"]').click(function() {
alert('111');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</body>
</html>
And also, put your code just before the closure </body> tag to ensure your dom is ready when the code runs.
I normally see that syntax for addressing custom attributes, try this.
$('button.edit').click(function() {
alert('1111');
});
Also put your script below your HTML. Or use a jQuery on document ready. Remember JavaScript/JQuery are executed sequentially.
Related
I know this question may be stupid, but I'm new to JQuery and failed to guess (even after hard search at Google) Why My Function failed to Show me Alert on Click Event of Button, (I'm trying to do more tasks but for debugging purpose I'm showing alert).
<!DOCTYPE html>
<html>
<head>
<title>WebSite Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
$(document).ready(function(){
$('#foo').click(function(){
alert('ggg');
});
});
</script>
</head>
<body>
<input type="button" name="" value="Get Data" id="foo">
</body>
</html>
As #Pranav mentioned, you should separate the scripts, so each can work.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').click(function() {
alert('ggg');
});
});
</script>
I'm Totally Agreed with Answers of above two users, You have to Put Your Code away from the tags referencing the Libraries, What you need to do is place your logical code may be of Javascript or JQuery in Another Script Tags
In one of my projects the onmousedown event didn't seem to be doing anything when it was meant to trigger a function in a separate JavaScript file.
I tried incorporating both onmousedown and onClick on a button in a small test file to see if it was just a problem in the project, and it didn't work either, leading me to believe that I must be doing something wrong...
Here is my test.html file:
<!DOCTYPE html>
<html>
<body>
<button onmousedown="click()">Click</button>
<span id="testSpan"></span>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
And here is my main.js file:
function click() {
document.getElementById("testSpan").innerHTML = "SUCCESS";
}
To explain, the HTML button is supposed to trigger the click() function in main.js, and then cause "SUCCESS" to appear through the span element beside the button in the webpage; which it doesn't for me.
I have tried to do the same in a pen on codepen.io where it didn't seem to work either. Even weirder is the fact that I don't have any errors showing up at all... what am I missing?
It isn't working because you named your function 'click'. I changed the name to 'press' and your code works fine!
function press() {
document.getElementById("testSpan").innerHTML = "SUCCESS";
}
<!DOCTYPE html>
<html>
<body>
<button onmousedown="press()">Click</button>
<span id="testSpan"></span>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Try it :
<!DOCTYPE html>
<html>
<body>
<button onmousedown="window.click()">Click</button>
<span id="testSpan"></span>
<script>
function click() {
document.getElementById("testSpan").innerHTML = "SUCCESS";
}
</script>
</body>
</html>
I found this jsfiddle code, and I need it and I want to try that in my php file, but it doesn't work, whereas it's the same code, i just copied and paste and I don't change anything, but it still doesn't work.
My Code:
<!DOCTYPE html>
<?php
?>
<html>
<head>
<title></title>
<script>
$("#update").click(function() {
$("#counter").html(function(i, val) {
return val*1+1
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.jss"></script>
</head>
<body>
<button id="update" type="button">Click Me</button>
<div id="counter">10</div>
<?php
?>
</body>
</html>
Please show me my fault. Any help would be appreciated!
You should really be able to debug this yourself. Open your javascript console, and notice it says ReferenceError: $ is not defined. This means jquery isn't loaded. Now look at the URL you put in your script-src. Why does it end with in .jss? You have a typo there.
If you correct that you'll still get the same error. Why? Because you use jquery before including it. So put the included jquery library before the custom code.
Now, it still won't work. Why? Because you attach an event before the DOM is loaded; so when your script is processed, the button doesn't exist! So have a look at http://api.jquery.com/ready/ and you should know what to add, wrap your javascript inside $(function() {...}) and you're good to go
Maybe it's just a typo in jquery.min.jss
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.jss"></script>
it must be jquery.min.js
Or you placed your javascript before the jquery reference.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#target').click(function() {
$('#output').html(function(i, val) { return val*1+1 });
});
});
</script>
</head>
<body>
<button id="target" type="button">Click Me</button>
<div id="output">10</div>
</body>
</html>
This is the code:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#favorite").click(function(){
alert('click!')
});
});
</script>
</head>
<body>
<h4>Favourites <small><%= photo.fav %></small></h4>
<button id="favorite" class="btn btn-inverse">Favorite</button>
</body>
</html>
When I click the button, I don't get the alert window, so I think is a problem with the DOM tree, How can I resolve this...?
Thank's advance!
Or... You're not including jquery...
EDIT: Sarcasm aside, include the JQuery library before your code to be able to use it.
https://developers.google.com/speed/libraries/devguide
Here's an example of how it should looks... It works fine.
http://jsbin.com/osijok/1/edit
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#favorite").click(function(){
alert('click!')
});
});
</script>
</head>
<body>
<h4>Favourites <small><%= photo.fav %></small></h4>
<button id="favorite" class="btn btn-inverse">Favorite</button>
</body>
</html>
Pretty simple.
You don't have the JQuery library loaded on your page prior to executing methods from that library it looks like.
You need to import the jQuery JS Library to be able to use functions such as
$(document).ready(function(){ .. etc.
How can I resolve this...?
Use plain JavaScript
(function(){
document.getElementById("favorite").onclick = function() { alert('clicked'); }
}());
It may sound trivial but I am unable to do it.
Here is the simple code : what's wrong I am doing here ?
Is it like I have misunderstood the function? If yes, please correct me.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
jQuery('#id').append('<select></select>');
});
});
</script>
</head>
<body >
<input type="submit" class="button" id="id" value="submit"/>
</body>
considering your own code you can simply write
$('#id').after('<select></select>');
generally append works with a container since #id is associated with a button so it will not work. use div/span if you still want to use append, but if you don't want to .after() works fine.
you have no container/element in your body that will hold the newly added select, add a container in your html like this with id="id"
<body >
<div id="id">
</div>
<input type="submit" class="button" value="submit"/>
</body>
DEMO
Does #id exists in the document?
Do you want to add <option> to <select> ?
$(document).ready(function() {
$(".button").click(function() {
jQuery('body').append('<select><option value="1">One</option><option value="2">Two</option></select>');
});
});
Fiddle - http://jsfiddle.net/XVmuZ/
If you want to add it to #id then make sure it exists (like in rahul's answer)
Fiddle - http://jsfiddle.net/XVmuZ/1/
fisrt thing don't use submit button because it will postback your page so jquery will not work.
try this code
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
$('#ddl').append('<select><option>abc</option><option>def</option></select>');
});
});
</script>
</head>
<body >
<input type="button" class="button" id="id" value="submit"/>
<div id="ddl">
</div>
</body>