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.
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 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.
Is there any specific way for click event handlers for hash-change pages? For example, suppose I have a page abc.com. Clicking on a specific tab gives us abc.com#/tab1, a hashed page. On the hashed page, I want to add click event on, say, Save button.
My implementation assumes that the elements are all child nodes of body and hence using event-delegation. However, the same does not work as desired.
window.addEventListener("hashchange", function () {
console.log(window.location.hash);
$( "body" ).on( "click", "button", function( event ) {
if (window.location.hash === "#/tab1")
console.log("testing success");
});
});
As mentioned in the answer of this post, you can use jQuery approach for this one:
$(window).on('hashchange', function() {
console.log(window.location.hash);
saveButton = $('#saveBtn:not(.bound)');
if (saveButton != undefined) {
saveButton.addClass('bound').click(function(){
if (window.location.hash == '#/tab1') {
console.log('testing success!');
}
});
}
});
Checking for .bound class ensures that the click event is bound only once to the saveButton. (Source here)
I have two <select> elements: select.exerciseType and #moduleTopic, each with their own handler wrapped around the document. I believe it's important to know that select.exerciseType is dinamic and there can be multiple of those.
Their events are:
$(document).ready(function() {
$(document).on("change", $("select.exerciseType"), function(e) {
<!--Code not really important-->
}
$(document).on("change", $("#moduleTopic"), function(e) {
<!--Code not really important-->
}
}
My problem is, when I change the selected option in one of those selects, both those events are firing. Why is the selector in the on() function not working and how can I make it work?
Syntax for jQuery .on handler is .on( events [, selector ] [, data ], handler ) where second argument is string
In your case, as it is not string, it is omitted and the event is always triggered when it reaches the selected element!
$(document).ready(function() {
$(document).on("change", "select.exerciseType", function(e) {});
$(document).on("change", "#moduleTopic", function(e) {});
});
Can you use this code instead:
$("#moduleTopic").change(function() {
// code executes here
});
EDIT ---
You can use a classname and detect the <select> being changed by the use of $(this) inside your function.
You don't need document.ready and you also just specify the selector, not retrieve it. i.e.
// class example
$(document).on("change", "select.exerciseType", function(e) {
// Code not really important
});
// ID example
$(document).on("change", "#moduleTopic", function(e) {
// Code not really important
});
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(){ .... });