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(); });
Related
I have the next code. What am trying to do is when i refresh or open the page, to add the class intro. But my main problem is in the part :
$("body").load(function(){
I want when the page is opened, then to add the class .intro. Instead of body, i have also tried html, and still doesn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").load(function(){
$("p").addClass("intro");
});
});
</script>
<style>
.intro {
background-color:green;
}
</style>
</head>
<body>
<img src="https://k32.kn3.net/taringa/1/9/3/9/4/7/32/johnny_te_toco/330x330_248.gif" width="304" height="236">
<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>
You should not use load() for this purpose.
load() function description : Load data from the server and place the returned HTML into the matched element.
You need just ready function to achieve that :
$(document).ready(function(){
$("p").addClass("intro");
});
//OR
jQuery(function($){
$("p").addClass("intro");
});
Hope this helps.
Try this instead:
$(document).ready(function(){
$(window).load(function(){
$("p").addClass("intro");
});
});
Load event attached to the window. If that is what you meant? Load on a DOM element like that doesn't make much sense.
Whilst this should work, you could pull it out of your ready() event.
$(document).ready(function(){
// Nothing to see here...
});
$(window).load(function(){
$("p").addClass("intro");
});
This waits for the load of the window, but if you just want to add the class as soon as possible when the DOM is ready, well, you won't need the load() at all:
$(document).ready(function(){
$("p").addClass("intro");
});
Bonus: You should use on() to attach all events going forward.
$(window).on('load', function(){
$("p").addClass("intro");
});
on() is the preferred method for events in future jQuery versions, as older methods are deprecated.
All the best.
Put your code inside $(document).ready callback.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").addClass("intro");
});
</script>
<style>
.intro {
background-color:green;
}
</style>
</head>
<body>
<img src="https://k32.kn3.net/taringa/1/9/3/9/4/7/32/johnny_te_toco/330x330_248.gif" width="304" height="236">
<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>
$(window).on('load', function(){
$("p").addClass("intro");
});
I'm new to jQuery, so this should be a simple question.
As far as I understand, I can bind a method to listen to an event, such as the click of a button, using
$('#buttonID').bind('click', function (){//some code});
However, this isn't working for me, so I must be doing something wrong.
This is my simple html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
<script src='test.js'></script>
</head>
<body>
<input id="SignIn" type="button" value="Sign In"></input>
</body>
</html>
Apart from loading jQuery files, it loads file test.js, which looks like this:
// JavaScript Document
$('#SignIn').bind('click', function() {alert('hi');});
Is that not enough for binding? I was hoping this would fire an alert dialog, but it doesn't, it seems the callback is not executed at all.
What is wrong here? Both files (html and js) are located in the same directory, and Google Chrome does not complain about anything in the JavaScript console, so from that end, everything should be fine.
Thanks for all help!
Wrap your code in document ready handler. It accepts a function which executes when DOM is fully loaded.
As you are using jQuery 1.3
$(document).ready(function() {
$('#SignIn').bind('click', function() {
alert('hi');
});
});
For jQuery 1.7+,
$(document).ready(function() {
$('#SignIn').on('click', function() {
alert('hi');
});
});
Additionally, As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
$(function(){
$('#SignIn').bind('click', function() {alert('hi');});
})
Try
$(function(){
$('#SignIn').click(function() {alert('hi');});
});
Move your Javascript to the bottom of the HTML page, right above the closing body tag.
That way the DOM is ready when it is loaded, and there's no need for $(document).ready() calls.
https://developer.yahoo.com/performance/rules.html#js_bottom
You may want to include your JavaScript files at the very bottom, and everything should work as expected. It is recommended to do this and to include CSS files at the top (head tag). For more information see link included by #Grim...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input id="SignIn" type="button" value="Sign In"></input>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
<script src='test.js'></script>
</body>
</html>
$( "#target" ).click(function() {
//Write some code here
});
You can try this.
$(document).ready(function(){
$('#SignIn').on('click', function() {alert('hi');});
});
You can use this.
$(document).ready(function () {
$("#SignIn").click(function () {
alert('demo');
});
});
Code:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
</script>
The above code doesn't work. When I click on #clicker, it doesn't alert and and it doesn't hide. I checked the console and I get no errors. I also checked to see if JQuery was loading and indeed it is. So not sure what the issue is. I also did a document ready function with an alert and that worked so not sure what I am doing wrong. Please help. Thanks!
You are supposed to add the javascript code in a $(document).ready(function() {}); block.
i.e.
$(document).ready(function() {
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
});
As jQuery documentation states: "A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute"
I found the best solution for this problem by using ON with $(document).
$(document).on('click', '#yourid', function() { alert("hello"); });
for id start with see below:
$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });
finally after 1 week I not need to add onclick triger.
I hope this will help many people
Your code may work without document.ready() just be sure that your script is after the #clicker. Checkout this demo: http://jsbin.com/aPAsaZo/1/
The idea in the ready concept. If you sure that your script is the latest thing in your page or it is after the affected element, it will work.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<a href="#" id="clicker" value="Click Me!" >Click Me</a>
<script type="text/javascript">
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
</script>
</body>
</html>
Notice:
In the jsbin demo replace http with https there in the code, or use this variant Demo
Try adding $(document).ready(function(){ to the beginning of your script, and then });. Also, does the div have the id in it properly, i.e., as an id, not a class, etc.?
You have to wrap your Javascript-Code with $(document).ready(function(){});Look this JSfiddle.
JS Code:
$(document).ready(function() {
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
});
Be sure there is nothing on your button (such a div or a trasparent img) that keeps from clicking the button.
It sounds stupid, but sometimes we think that jQuery is not working and all that stuffs and the problem is on the positioning of DOM elements.
You can use $(function(){ // code }); which is executed when the document is ready to execute the code inside that block.
$(function(){
$('#clicker').click(function(){
alert('hey');
$('.hide_div').hide();
});
});
Just a quick check, if you are using client-side templating engine such as handlebars, your js will load after document.ready, hence there will be no element to bind the event to, therefore either use onclick handler or use it on the body and check for current target
Proper Browser Reload
Just a quick check as well if you keep your js files separately: make sure to reload your resources properly. Browsers will usually cache files, so just assure that i.e. a former typo is corrected in your loaded resources.
See this answer for permanent cache disabling in Chrome/Chromium. Otherwise you can generally force a full reload with Ctrl+F5 or Shift+F5 as mentioned in this answer.
I have a page that looks like this..
<!DOCTYPE html>
<html>
<head>
<title>JQM</title>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script>
$(function(){
$('[data-role="list-divider"]').toggle(function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
I am adding html in dymanically from the server in the content area. The problem is that when I add the content dynamically, the jquery function that I created statically on the page doesnt engage..
<script>
$(function(){
$('[data-role="list-divider"]').toggle(function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
</script>
If I add the html statically all the code works fine and everything is good. My question is how do I make this jquery available to run once html is added to the page from the server?
I DID THIS AND IT WORKED, is there a more elegant way using .on or is this fine?
//got html blob
deferred.success(function (res) {
$(function () {
$('[data-role="list-divider"]').toggle(function () {
$('.' + $(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
}, function () {
$('.' + $(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
});
Since the jquery is currently ran when the document is ready and your content is not loaded yet it won't find the elements and wire-up the events. Adding your script to the ajax.success should solve your problem.
looking at your code, I don't see where you're loading the content dynamically. But if you want that script to run. You should try a document.ready() in front of that script
You can't bind event handlers to elements that haven't been created. Check out this:
http://api.jquery.com/on/
Try this:
$(function(){
$(document).on('toggle', '[data-role="list-divider"]', function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
Haven't tested it though. For on('click') this usually works.
What you do is you bind the 'toggle' trigger to the whole document ( $(document) ) and then check on what element is was triggered. This way you can detect elements that were created after the initialization of the DOM.
You have to use jquery .On() method to attach even handlers to contents dynamically added to pages. Check this - .on
Some thing lik this might work (didn't test) :-
$(function(){
$('[data-role="list-divider"]').on('toggle' ,function(event){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(event){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
Here's my code and nothing is happening:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
</script>
</head>
<body>
<div class="clickMe">Click Me!</div>
</body>
</html>
However, nothing happens when you click the "clickMe" div.
Thanks!
Let the document be ready
$(function(){
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
})
The way you had it, the div is not yet available (the DOM is not loaded) so, no click handler is added. You need to wait for document to be available. The .ready() is to be used for that.
$(document).ready(function() {...})
$(function() {...}) - Shortcut
Try wrapping the jQuery code inside this:
$(document).ready(function() {
// Handler for .ready() called.
});
When you execute the existing code in the head, the clickMe div does not exist.
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
});
</script>
</head>
<body>
<div class="clickMe">Click Me!</div>
</body>
</html>
You by comparing the differences you will find out the solution. Basically is this line: $(document).ready(function(){});
The DOM is not loaded yet when your JavaScript code is executed. You have to add the code to the .ready() callback. Then the code is executed when the browser parsed the HTML and jQuery can find the elements:
$(function() {
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
});
$(function(){..}); is shorthand for $(document).ready(function(){...}).
DEMO
The script is running before the .clickMe element even exists. Wrap your code in a dom ready callback:
$(function() {
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
});
Another solution would be moving your script below the element definition but using the dom ready event is much cleaner.
The issue is that you are attaching the event handler before the element is rendered to the DOM. Try this instead:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
$(document).ready(function() {
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
});
</script>
</head>
<body>
<div class="clickMe">Click Me!</div>
</body>
</html>
The code passed into the $(document).ready function will be executed once the page is entirely loaded - so you can safely attach events to yet-to-be-created elements.
http://api.jquery.com/ready/
You're asking jquery to find your clickMe div before it exists. It's down lower on the page and the browser has not loaded it yet. A simple fix is to set up your click handler during the document ready event:
<script>
$(document).ready(function() {
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
});
</script>