I want to show loader when someone clicks on any element on my site.
My Code:
(function ($) {
$('body').append("<div id='loader-box'></div>");
$("loader-box").html("");
$("a").on('click', function (e) {
$("loader-box").html("<div class='loader-wrapper'><div class='loader-image'></div></div>");
});
}(jQuery));
The problem is that append does not work. I do not understand why. Thanks!
--- UPDATE ---
I found a solution, thanks to all especially Andrei Cristian Prodan who helped me to solve the problem with .on() function. I also use the wrong function to add "loader-box" div.
This is my code:
(function($){
$("body").prepend('<div id="loader-box"></div>');
$("#loader-box").html("");
$("html").on("click", "a",function(){
$("#loader-box").html('<div class="loader-wrapper"><div class="loader-image"></div></div>');
});
}(jQuery));
Thanks!
You are missing a "#" in your selector $("#loader-box");
Also if you are executing this code before the anchors exist in your page (for e.g. at the top of your body or inside the header), the click will not be assigned because $('a') will be empty.
Do this instead: $('html').on('click', 'a', function() {...} );
Your selectors are just a little off; missing #:
<script>
$(function($){
$('body').append("<div id='loader-box'></div>");
$("#loader-box").html("");
$("a").on('click', function(e){
$("#loader-box").html("<div class='loader-wrapper'><div class='loader-image'></div></div>");
});
});
</script>
And DOM ready needs to be written correctly.
Related
when i click on gallery, and visit for example "paintings", the links on the menu stops working, why is this? can someone please tell me whats wrong -_-
http://madebysam.se/elbarco
This is the code im using
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
$('ul li').on('click',function(event) { event.stopPropagation(); })
});
});
Using dev tools and a breakpoint inside your example code snippet on your live site, I see that only the links loaded initially trigger your event handling code.
The problem is here:
$('a').on('click',function(){
// do stuff
});
The common pitfall is that you register this handler against all anchor tags that are loaded in the page at that moment. Any anchor tags dynamically added later will not enjoy that same event handler.
A workaround is to use a different syntax, targeting first a larger tag that is guaranteed to be there on first load, and then filter down to the anchor tags:
$('body').on('click', 'a', function(){
// do stuff
});
Is it posible to add new element with javascript by using href and disable href at the same time?
So href only clicked once, and after that the new element will appear.
I wrote this code, but still no luck
JS
$(document).ready(function() {
$("#add_app").click(function() {
$("#box").append("<p>jQuery is Amazing...</p>");
this.removeAttribute('href');this.className='disabled';
}});
HTML
<a href="#" id="add_app" ><strong>Summon new element and disable me</strong></a>
The only does the job is in JS line
$("#box").append("<p>jQuery is Amazing...</p>");
Need help..
Thanks
--------------------------------------UPDATE---------------------------------
-Using improved code by PacMan, Linus Aronsson, and guest271314 and it works like a charm.
So basically we use .one() event handler to solve the problem.
Thanks for the feedback guys
Use this jQuery:
$(document).ready(function() {
$("#add_app").one("click", function() {
$("#box").append("<p>jQuery is Amazing...</p>");
this.removeAttribute('href');
});
});
I'm using the .one() event handler to indicate that you only want the click event to take place once. The rest of the code was more or less correct with a few small changes.
Here's a fiddle: https://jsfiddle.net/0mobshpr/1/
You can use .one(); note js at Question is missing closing parenthesis ) at click()
$(document).ready(function() {
$("#add_app").one("click", function() {
$("#box").append("<p>jQuery is Amazing...</p>");
this.removeAttribute('href');this.className='disabled';
})
});
you can try this
HTML
<a style="cursor: pointer;" id="add_app" ><strong>Summon new element and disable me</strong></a>
<div id="box"></div>
and in your JS code you can write this i have tested it and it worked fine
$(function(){
$("#add_app").one("click",function(){
$("#box").append("<p>jQuery is Amazing...</p>");
});
});
you need to return false whwn the link is click.
try this one JQuery code..
$("#add_app").click(function() {
$("#box").append("<p>jQuery is Amazing...</p>");
return false;
});
I have following code snippet in jquery when we click on layer 62 which loads a layer "loaded-page" from a page test.html as follows.
<script>
$(document).ready(function(){
$('#62').on('click', function(e) {
$("#62" ).load( "test.html #loaded-page" );
});
$('#loaded-page').on('click', function(e) {
alert('test');
});
});
</script>
<div id="62">Layer62</div>
Test page coding
<div id="loaded-page">Loaded page</div>
MY issue is when we click on layer loaded-page inside DOM, the alert test is not functioning. Can anybody suggest a solution for this ? If needed I can prepare a fiddle for this
This already has an answer, but essentially what you are looking for is event delegation
When you bind the event in your code, that element doesn't exist yet.
So, you bind the event differently, so that it will respond to dynamically added content:
$(document).on('click', '#loaded-page', function(e) {
alert('test');
});
NOTE: Without knowing your html structure, I can't provide the best solution, but I CAN tell you that you do not want to use document if possible. Instead, you should use the nearest parent that exists when the DOM is initially loaded. In your case, my guess is that this would work:
$('#62').on('click', '#loaded-page', function(e) {
alert('test');
});
because that when you bind the
$('#loaded-page').on('click', function(e) {
alert('test');
});
maybe that the #loaded-page element is not be loaded into the document,so can't find it
the better way is :
$(document).delegate('#loaded-page','click',function(){
alert('ok')
})
I have a simple div in one of my views that I want to click to hide another element on the page. I put this in my application.js But it doesn't do anything. Did I put it in the wrong place?
function toggleNewPostForm {
$('.new-post-btn').hide();
}
Use document ready to make sure document is loaded before selecting an element from HTML and call your function inside
function toggleNewPostForm(){
$('.new-post-btn').hide();
};
$( document ).ready(function() {
toggleNewPostForm();
});
Try something like this
<div class="xyz">Click here!</div>
in javascript
$(".xyz").click(function(){
$('.new-post-btn').hide();
});
Also check if event listener is added after document ready method? i.e
$(function(){
$(".xyz").click(function(){
$('.new-post-btn').hide();
});
});
If this is the only js you have, there will be no click-behaviour. You have to tell the element, that is has to react to a click-event.
Try this in your application.js-file:
function toggleNewPostForm() {
$('.new-post-btn').hide();
}
$(document).on('ready page:load', function(){
$('.new-post-btn').on('click', function(){
toggleNewPostForm();
});
});
P.S.: As RGraham points out, you have to write the parameter-paranthesis if you define a function.
P.P.S.: In ruby on rails, you should check against 'ready' and 'page:load' as document-ready-handlers, because Ruby on Rails uses the "Turbolinks"-library by default.
I understand that you need to use ".on" to use code that you loaded with jquery after the page has loaded. (At least I think it works that way)
So I tried that but it somehow just doesn't do a thing at all. No errors in the console either.
$("#forgot_password").click(function(){
var forgot_password = '<div id="toLogin" style="cursor:pointer;">Prijava</div>'
$("#loginPopupForm").html(forgot_password);
});
$("#toLogin").on("click", function(){
alert("Hello");
});
So when I click on #forgot_password it does execute the first click function. But when I click on #toLogin it doesn't do anything and I think its because its loaded with jquery when I click on #forgot_password
Try this
$("#loginPopupForm").on("click", "#toLogin", function(){
alert("Hello");
});
You need to bind to an element that is present when the page loads, like body for example. Just change your code to what is shown below
$("body").on("click", "#forgot_password", function(){
var forgot_password = '<div id="toLogin" style="cursor:pointer;">Prijava</div>'
$("#loginPopupForm").html(forgot_password);
});
$("body").on("click", "#toLogin", function(){
alert("Hello");
});
You are setting the on to the wrong thing. You want it to be:
$(document).on('click', '#toLogin', function() {alert('hello') });
The id isn't there until you do the other click event, so jQuery is not finding any element to set the click event on. You need to have an element that has been rendered in the DOM to set the event on.
You are totally right about the problem : on() targets only elements that are already existing as it runs.
What you need in jQuery is called Delegated event and is well explained on the Jquery doc page.
The difference in the code is thin, but it's how you're supposed to do.
You have to specify the parent element
$("#toLogin").on("click","#loginPopupForm", function(){
alert("Hello");
});
in the 2nd argument of the on