JQuery hover effect for dynamically added elements

Question

JQuery hover effect for dynamically added elements

Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below:

$.ajax({
  type: 'POST',
  url: "http://mysite.dev:32769/getallnews",
  success: function(data){
       $container.append(item)
        .isotope( 'appended', item );
  }
});

I would like to mention that I am incorporating Metafizzy's Isotope library. More information can be found here.

For demonstration purposes, there is a

<div class="article-block"></div>

present in the DOM initially, with another one appended after the ajax call completes.

The following jQuery code only works for detecting hover on the first div element and not the second:

$(".article-block").hover(function(){
  //hover on
  $(".article-block div").fadeIn();
},function(){
  //hover off
  $(".article-block div").fadeOut();
});

After spending time debugging, I observed that typing $('.article-block'); in the console displays both elements correctly. However, when hovering over the first one, the fade effect occurs, while it does not work for the second one.

Any suggestions or ideas on how to fix this issue?

javascript jquery css ajax

Answer 1

Answer №1

Order of Operations is Key

When registering your event handler for the initial div upon page load, you are setting a solid foundation. Remember, it's crucial to consider that if new DOM elements are added later on, you will need to apply handlers to those new items as well.

Consider saving a reference to your handlers and applying them at a later time.

function hoverOn() {
    $(".article-block div").fadeIn();
}
function hoverOff() {
    $(".article-block div").fadeOut();
}

// initially on page load
$('.article-block').hover(hoverOn, hoverOff);

// Later in an AJAX call
$.ajax({
    type: 'POST',
    url: "http://mysite.dev:32769/getallnews",
    success: function (data) {
        $(item).hover(hoverOn, hoverOff); // Register your hover event for the new element.
        $container.append(item).isotope( 'appended', item );
    }
});

Answer 2

Order of Operations is Key

When registering your event handler for the initial div upon page load, you are setting a solid foundation. Remember, it's crucial to consider that if new DOM elements are added later on, you will need to apply handlers to those new items as well.

Consider saving a reference to your handlers and applying them at a later time.

function hoverOn() {
    $(".article-block div").fadeIn();
}
function hoverOff() {
    $(".article-block div").fadeOut();
}

// initially on page load
$('.article-block').hover(hoverOn, hoverOff);

// Later in an AJAX call
$.ajax({
    type: 'POST',
    url: "http://mysite.dev:32769/getallnews",
    success: function (data) {
        $(item).hover(hoverOn, hoverOff); // Register your hover event for the new element.
        $container.append(item).isotope( 'appended', item );
    }
});

JQuery hover effect for dynamically added elements

Answer №1

Order of Operations is Key

Consider saving a reference to your handlers and applying them at a later time.

Similar questions

Using the Object.assign technique will modify the original object's properties in JavaScript

Tips for arranging images in a horizontal layout using FlatList in React Native

Encountering issues with extension CLI - "Unable to utilize the import statement outside a module"

Vue and Jexcel: maximizing efficiency with event handling and dynamic calculations

Error 500 on Firebase: Issue solving "firebase" in "firebase.js" not resolved

Top technique for extracting json files from post requests using nodejs

Creating diagonal background cutouts using CSS

Loading Rails page with Ajax request

How to utilize AJAX to input data into a MySQL database using PHP in a multi-step form

find all the possible combinations of elements from multiple arrays

Creating a jQuery multiple image preview feature is a simple and effective way to

Troubleshooting: Why is $watch failing to track changes on factory variables in Angular

Issue encountered: Failure to locate module 'socket.io' while attempting to execute a basic server JavaScript file

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

How can the overflow:hidden be applied to the body after a specified height, rather than the height of the viewport

Arranging an array of arrays based on the mm/dd/yyyy date field

When using @click as a link, it results in an

Tips for correctly identifying and sending the form name and submit button name when using AJAX for form submission

Utilizing Ajax to insert a line break within an alert message

React Error: Invalid Element Type with Named Exports