This question already has answers here:
Dynamically adding a click handler in jQuery
(2 answers)
Closed 8 years ago.
I'm trying to fix an issue on the mobile navigation of this page:
http://tinyurl.com/kq9xs6h
The tags are dynamically created in a JS function:
mobile_advanced = menu.clone().attr({id:"mobile-advanced", "class":""}),
Which results in generating this HTML line:
<ul class="" id="mobile-advanced" style="position: absolute;">
The following code is working when using the browser console (so when the html has been generated):
jQuery('#mobile-advanced a').on('click', function() {
jQuery('body').removeClass('show_mobile_menu');
jQuery('body').removeClass('show_mobile_meta');
jQuery('body').css({'height':'auto'});
});
But when I insert it in my JS file, the event's handler is not understood.
Where should I put this piece of code or how do I need to modify it so the handler is taken into account?
What if you wrapped your code in doc ready?
jQuery( document ).ready(function() {
jQuery('#mobile-advanced').on( "click", "a", function() {
jQuery('body').removeClass('show_mobile_menu');
jQuery('body').removeClass('show_mobile_meta');
jQuery('body').css({'height':'auto'});
});
}
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
It is easy to add text in page after loading thanks to javascript but I would like to add a link with a link and be able to catch the click event without reloading page
$("#div").html("<a href='#' id='new'>new link</a>");
// not work, because no
$("#new").click(function(e) {
e.preventDefault();
alert('click');
});
Do you know if there is a way ?
replace
$("#new").click(function(e) {
e.preventDefault();
alert('click');
});
with
$(document).on('click','#new',function(e) {
e.preventDefault();
alert('click');
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have the following javascript code:
$(function (){
$('a.folder').click(function() {
// code goes here ...
}
});
And the following html code:
<a class="folder" href="GetFilesAndFolders?rootFolder=Exigences">Etudes de cas</a>
Whenever I click on the link, the javascript code is never reached. I must say that this html code is generated dynamically after the page loaded. Is this the reason? Any workaround?
when you attach the click handler it's possible that your anchor doesn't exist, try using this:
$(function (){
$(document.body).on('click', 'a.folder', function() {
// code goes here ...
});
});
using this event delegation the click event will fire even if your anchor created dynamically after this code.
$(document).ready(function() {
$("body").on("click", "a.folder", function(e) {
e.preventDefault();
alert('a .folder was clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="folder" href="GetFilesAndFolders?rootFolder=Exigences">Etudes de cas</a>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
So here is a question.
I have HTML
<a class="callback">Callback</a>
I have external Jquery-file (with Bootstrap.js included)
$(".callback").on('click', function() {
var myModal = '<div><a id="callback"></div>';
$(myModal).modal('show');
});
$("#callback").on('click', function() {
//some actions
});
So ".callback"-event works fine because that link we have in the current DOM.
But "#callback"-event does NOT work. Maybe cos of that element appears after JS-file has loaded (seriously?).
Please, could anyone answer why "#callback"-event does NOT work?
Thanks a lot!
You need to use jQuery's event delegation syntax for on() when binding to dynamically created elements:
$(document).on('click', "#callback", function() {
This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 8 years ago.
This is the task I am trying to implement:
after an element "a" is clicked, jQuery generated some other elements, for example, a "p". Then if the "p" generated by JS is clicked, a msgbox pops up.
This is the example code I wrote: http://jsfiddle.net/ux3n8/
$(".original").click(function(){
var p=$('<p>').text("hahahahahaha");
$(p).addClass("createdByJS");
$(".main").append($(p));
});
$(".createdByJS").click( function(){
alert("hello World!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a class="original">test</p>
</div>
If I remove the event of $("a").click(function(), but still have the jQuery to generate the "p" there, everything works well. But if the "p" is generated on a click of "a", then I cannot add further jQuery functions to it.
I am still new to coding. It would be really appreciated if someone could help me find a solution.
Thank you very much!
You need to delegate the event to an element which is present at the time of adding the new element. In this case document.
http://learn.jquery.com/events/event-delegation/
Demo:http://jsfiddle.net/robschmuecker/ux3n8/2/
$(".original").click(function () {
var p = $('<p>').text("hahahahahaha");
$(p).addClass("createdByJS");
$(".main").append($(p));
});
$(document).on('click', '.createdByJS', function () {
alert("hello World!");
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I know that on click is used for dynamically generated elements ... so my AJAX returns data and the link to be clicked on ... but for some reason , nothing happens .. below is my code
// jquery for the click event
$(".back_to_followers").on('click', function(event){
event.preventDefault();
alert('clicked');
$('.user_media_result').empty();
$('.user_media_result').hide();
$('.list_of_followers').show();
});
and the link brought by AJAX
<a class="back_to_followers" style="color:blue; font-size:20px;" href="#"> Back to list of followers </a>
Use this:
$(document).on('click', ".back_to_followers", function(event){
event.preventDefault();
alert('clicked');
$('.user_media_result').empty();
$('.user_media_result').hide();
$('.list_of_followers').show();
});
Your code only works on what is already loaded so you can set an event which targets the entire document or the parent element which contains the .back_to_followers and then defines the element which must be clicked: elements with .back_to_followers class.