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();
});
Related
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>
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(); });
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');
});
});
I have jQuery on my webpage.
I am changing background color of a div.
Its not working.
<script type="text/javascript">
$("#gridbox").css({'background-color':'black'});
</script>
Your code should work, try using document ready handler.
$(document).ready(function(){
$("#gridbox").css({'background-color':'black'});
})
http://jsfiddle.net/WcQse/
Its possible your script is running before the DOM has loaded. Try:
<script type="text/javascript">
$(document).ready(function(){
$("#gridbox").css({'background-color':'black'});
});
</script>
-- Demo --
Try this
If you are using ASP.NET then your Client ID might change depending on the use of Master Pages in that case you can try something like this.
$('#<%= gridbox.ClientID %>' ).css('background-color','black');
If it is just a div then you should wrap it in document.ready() method
$(document).ready(function(){
$('#gridbox').css('background-color','black');
});
Demo
The same code that you are using is working fine for me
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="gridbox" style="background-color:red;">gridbox</div>
<script type="text/javascript">
$("#gridbox").css({'background-color':'black'});
</script>
</body>
</html>
so you should first include the jquery library, then put the javascript file after the div that you want to change the background color.
Try:
$("#gridbox").css("background-color", "black");
Edit:
Add a document ready function, this will execute the css change after the DOM has loaded.
$(document).ready(function() {
$("#gridbox").css("background-color", "black");
});
Note: Ensure you have the jQuery JavaScript file referenced in the page.