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

Transmitting JSON information using post method through .ajax(), as well as receiving a JSON reply

IE10 does not support Ajax functionality

HTML text not lining up with SVG text

What is the best way to develop a widget that loads asynchronously by implementing AJAX, JavaScript, and PHP?

Is there a way to interact with a Bootstrap 5 dropdown in React without triggering it to close upon clicking?

Exploring the world of nested routes and AJAX in Rails 3.2

Phantom.js: Exploring the Power of setTimeout

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

"Implementing constraints in Postgres using Node.js

Best practices for arranging several divs with CSS

The jQuery has not been activated

What is the method for specifying the HTML file extension within Visual Studio?

What is the process for retrieving API information with jQuery's AJAX functionality?

Confirm that only the days of the present month are eligible for selection

Transforming NodeJS Express HTTP responses into strings for AngularJS consumption

"The JavaScript code included in the index.html file is not functioning as expected when called in the main.js file within a

Plugin for jQuery that paginates text when it overflows

What is the best way to create a dynamic hyperlink that leads to a detailed information page based on the specific link clicked?

Encountering a lack of response when making an ajax call to CouchDB

Troubleshooting issue with asp.net jquery datepicker functionality