I have several HTML elements, that are rendered by a javascript function on the page:
Test
Test
Test
I then have further javascript that I use to create a function when Test is clicked:
$(document).ready(function(){
$( ".test1" ).click(function() {
// Code here
});
$( ".test2" ).click(function() {
// Different code here
});
$( ".test3" ).click(function() {
// Different code here
});
});
However, because the HTML inserted is not loaded at the same time the page loads (it is dynamically inserted after), my click function doesn't capture the event. How can I solve this?
You need to use a delegated event handler:
$(document).ready(function(){
$(document)
.on('click', '.test1', function() {
// Code here
})
.on('click', '.test2', function() {
// Code here
})
.on('click', '.test3', function() {
// Code here
});
});
Note, for best performance document should be changed to the closest static parent element which is available on DOM load.
Use .on()
As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.
$(document).on('click', '.test', function() { //code here });
Syntax
$( elements ).on( events, selector, data, handler );
You can make your click events "live", so they attach to objects as they are introduced to the dom.
Just change
.click(function(){ .... });
to
.live('click', function(){ .... });
Related
I've written a jQuery function which updates a div upon clicking another div. However, it is only firing on the second click each time and I'm rather confused.
How can I fix this?
$(document).ready(function(){
$(".block-swatch").click(function(){
$("#refresh-feefo").load(window.location.href + " #refresh-feefo" );
});
});
You should consider using .on as it allow to bind event from a parent and if your DOM element #refresh-feefo isn't ready, it will still work.
$(document).ready(function(){
$("body").on('click', '.block-swatch', () => {
$("#refresh-feefo").load(window.location.href + " #refresh-feefo" );
});
});
I used body , but be careful:
Hierarchical selectors can often be avoided simply by attaching the handler to a more appropriate point in the document. For example, instead of $( "body" ).on( "click", "#commentForm .addNew", addComment ) use $( "#commentForm" ).on( "click", ".addNew", addComment ).
Read Event performance section here for more: https://api.jquery.com/on/
I am testing out some functionality and I am trying to make so once I hover on a particular element (in this example any link) it will output something inside the console.
I have looked at this answer -> here where it says "you can define your function once, and it will execute for any dynamically added elements"
So I have this js script but once the elements are loaded dynamically, i.e. like youtube videos, but once I hover on the newly added elements, this script will not work, no output inside the console.
$( "a" ).on({
click: function() {
console.log('clicked');
}, mouseenter: function() {
console.log('enter');
}, mouseleave: function() {
console.log('left');
}
});
Am I missing something here?
The way you have bound the elements is used to bind multiple event handlers to the same elements. If they are dynamically added then you will have to resort to event delegation. Where you will be binding the event to a parent element which is present when the event is bound.
$( "body" ).on('click', 'a', function() {
console.log('clicked');
});
$( "body" ).on('mouseenter', 'a', function() {
console.log('enter');
});
$( "body" ).on('mouseleave', 'a', function() {
console.log('left');
});
you can replace the body with any other closest parent to a which is present at the time of event binding.
As you know, for the HTML which is pushed into document after page loading, this won't work:
$('.myclass').on('click', function(){
})
And we have to write it like this to work:
$(document).on('click', '.myclass', function(){
})
Ok all fine, now I want to know how should I write following code to work for the HTML that is pushed later ?
$(".myclass").on({
focusout: function() {
},
keydown: function(ev) {
}
})
When you put a jQuery event listener on the document it will listen for changes in the document and apply event listeners to matching selectors. This should be used if you dynamically add content to the DOM.
You will probably want break it into two separate event listeners:
$(document).on('focusout', '.myclass', function(){
//...
})
$(document).on('keydown', '.myclass', function(){
//...
})
If you want the exact function to run on both focuseout and keydown you can add as many events as you want:
$(document).on('focusout keydown', '.myclass', function(){
//...
})
Split it into two parts
$(document).on('focusout', '.myclass', function(){
});
$(document).on('keydown', '.myclass', function(ev){
});
I want to modify an Id of button 'B' when button 'A' is clicked, and listen to the click event of of 'B' using Jquery but my code doesn't work,
this is an example of my code:
$(function() {
$(".nuttonA").click(
function() {
$("#buttonB").attr("id","notButtonB");
});
$("#notButtonB").click(function(){
console.log(" notButtonB is clicked "); //show nothing
});
});
i think you need event delegation. try this:
$(function() {
$(".buttonA").click(
function() {
$("#buttonB").attr("id","notButtonB");
});
$( "body" ).on( "click", "#notButtonB",function(){
console.log(" notButtonB is clicked "); //show nothing
});
});
Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.
You need to use Event Delegation using delegated-events approach when manipulation properties.
General Syntax
$(document).on('event','selector',callback_function)
Example
$(document).on('click', ".nuttonA", function(){
$("#buttonB").attr("id","notButtonB");
});
$(document).on('click', "#notButtonB", function(){
//Your code
});
In place of document you should use closest static container.
I would like to trigger a javascript function when a specific URL is available on the page.
The url looks like:
I would like to use jQuery to detect the url and launch an event.
I have come this far:
$( 'a[href="https://www.mypage.com/my-page/details.jsp"]' ).bind( "click", function() {
alert( "yoehoe" );
});
But it doesn't trigger the alert on a click. on the specific href. Can anyone help me on this one?
You need to wrap the code in document.ready to ensure that event gets bind to respective elements once they are there on page.like this:
$(document).ready(function(){
$( 'a[href="https://www.mypage.com/my-page/details.jsp"]' ).bind( "click", function() {
alert( "yoehoe" );
});});
Demo
Alternatively, You can also use .on() with .click if dom is generated dynamically.like this:
$(document).on("click",'a[href="https://www.mypage.com/my-page/details.jsp"]',function() {
alert( "yoehoe" );
});