I got this problem about all night. I will click button and I got nothing data or alert. Please help me. And so Sorry for my bad English.I'll try to learn.
$(document).ready(function() {
$("#test-click").on("click",function() {
alert('1');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="test-click">testClick</button>
You can try this. Its working.
$(document).ready(function(){
$("#test-click").click(function(){
alert("1");
})
});
Yes OfCourse! your code is not working. because .on() event comes after jquery 1.7.x versions. Please use .live() event instead of .on() event. Or else use latest jquery version.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#test-click").live("click",function(){
alert('1');
});
});
</script>
<button type="button" id="test-click">testClick</button>
Related
I am trying to get a div to fade out and in on button click. It works on jfiddle but for some reason it is not working on my asp.net page:
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
<div>fade div</div>
<div id="fancy">Fancy Div</div>
http://jsfiddle.net/3XwZv/1859/
my asp.net page:
<html>
<head>
<script type="text/javascript" src="../javascript/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../javascript/jquery-ui.js"></script>
<script type="text/javascript" class="init">
$('#btn').click(function (e) {
$('#fancy').fadeOut('slow', function () {
$('#fancy').fadeIn('slow');
});
});
</script>
</head>
<body>
<div>Fade div</div>
<div id="fancy">Fancy Div</div>
</body>
</html>
If you put your jQuery code inside the head section and try to manipulate the DOM elements it won't work as at that time your HTML document isn't loaded yet. So you have two ways to resolve this issue.
First : Use $(document).ready() function and put your code inside it. So whenever your document is ready, $(document).ready() event will be fired.
$(document).ready(function () {
$('#btn').click(function (e) {
$('#fancy').fadeOut('slow', function () {
$('#fancy').fadeIn('slow');
});
});
});
Second : Put your jQuery code at bottom of your page.
Can you share the page you have this implemented on? Hard to know what's going wrong without seeing the failing code. My first guess would be that jQuery isn't running on your page.
In the meantime, you could try throwing a log inside of your click function to see if that's firing.
$('#btn').click(function(e){
console.log('Click fired');
$('#fancy').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
Looks like you may have not done the binding:
try this code
$(function(){
$('#btn').click(function(e){
console.log('Click fired');
$('#fancy').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
}
My problem is that there is no way to make preventDefault() work.
Here is my code:
HTML:
<a class="list-ui-controlcol-link list-ui-controlcol-link-delete" href="http://localhost/lmvc_trunk/pages/delete/17">Törlés</a>
JQUERY:
$(".list-ui-controlcol-link-delete").click(function(event){
event.preventDefault();
});
Even if I copy-paste the original example from jQuery's own site (http://api.jquery.com/event.preventdefault/) it is not working.
Could you explain me why this happening and how to make preventDefault work correctly?
You need to make sure that your script is executed after the DOM is loaded:
$(document).ready(function() {
$(".list-ui-controlcol-link-delete").click(function(event){
event.preventDefault();
});
});
See this page for more details: http://api.jquery.com/ready/
Where do you include your script? If you include the script in HEAD when the script loads there's no a.list-ui-controlcol-link-delete is present in the DOM.
Try doing this:
<html>
<head>
<title>test</title>
</head>
<body>
Torles
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Where app.js contains:
$('.list-ui-controlcol-link-delete').click(function(e) { e.preventDefault(); });
Although I'd recommend using the .on() function as it will dinamically bind the events on newly generated DOM elements:
$(document).on('click','.list-ui-controlcol-link-delete',function(e) { e.preventDefault(); });
I loaded data using AJAX in a div.
<div id="container">
<a class="hello" href="abc.php">hello</a> // loaded using ajax
<div>
Now I have jQuery:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.hello').on("click",function(e){
e.preventDefault();
});
});
</script>
However it's not working as it should, i.e. it's directing me to abc.php. Where am I going wrong ?
Use .on as your a tag is loaded dynamically
$('#container').on("click",".hello",function(e){
e.preventDefault();
});
The .on() should be set up like this to work with dynamically created elements. Also, make sure to use Jquery version 1.8 or earlier versions.
Try:
$('#container').on("click",'.hello',function(e){
e.preventDefault();
});
It also work from this..
$('.hello').click(function(){
e.preventDefault();
});
For some reason my jQuery script just doesn't want to work, and it's really really simple, I've taken everything away except the actual jquery script, it's really annoying please help.
Thank you!
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$("#click").click(function () {
alert("works!");
});
</script>
</head>
<body>
Button
</body>
</html>
P.S. jQuery JS file is valid.
Change your code to this. It ensures that the JavaScript is executed once all your HTML elements have been loaded to the page:
$(document).ready(function () {
$("#click").click(function() {
alert("works!");
});
});
However, you should move your script tags to the bottom of the page, to ensure that they do not block. This will also mean you don't actually need the $(document).ready callback.
You need to wrap your code within
$(function(){
// your code here which relies on DOM elements
});
Otherwise you DOM has not been loaded and events will not be bound to elements.
Wrap your functions into the $(document).ready()
$(document).ready(function(){
$("#click").click(function() {
alert("works!");
});
});
Add your code inside document.ready like this
$(document).ready(function () {
$("#click").click(function () {
alert("works!");
});
});
or add your code at the end of the document like this
<body>
Button
// Other elements...
<script type="text/javascript">
$("#click").click(function () {
alert("works!");
});
</script>
</body>
$(document).ready(function(e) {
//TO DO your code goes here
});
Just change your script tag to the "/body" tag.
That will let the browser create the DOM and read script's one by one!
Cheers!
Try this:
$("#click").live("click",function() {
alert("works!");
});
I'm currently trying to get an alert to happen when something is clicked. I can get it working in jsFiddle, but not in production code:
jsFiddle example that works (jQuery 1.5 loaded)
HTML (in case jsFiddle is inaccessible):
<!DOCTYPE HTML><html><head><title>Test</title></head>
<body> <h1>25 Feb 2011</h1><h3>ABC</h3><ul>
<li class="todoitem">Test—5 minutes</li> </ul>
</body></html>
Javascript:
$(".todoitem").click(function() {
alert('Item selected');
});
Non-working production example:
<!DOCTYPE HTML><html><head><title>Test</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".todoitem").click(function() {
alert('Item selected');
});
</script>
</head>
<body>
<h1>25 Feb 2011</h1><h3>ABC</h3><ul><li class="todoitem">Test—5 minutes</li></ul>
</body>
</html>
Safari's Inspector indicate that jQuery is being loaded correctly, so that's not the issue. As far as I can tell, these two pieces of code are essentially identical, but the latter isn't working. Can anyone see what I've done wrong?
You need to wrap your code in $(document).ready()
This will work
$(document).ready(function(){
$(".todoitem").click(function() {
alert('Item selected');
});
});
JSfiddle does this for you automatically
Wrap the code inside
$(function (){
})
And you have the working code
$(function (){
$(".todoitem").click(function() {
alert('Item selected');
});
})