The 'each' method in Jquery cannot be used on a DOM that has been dynamically loaded using Ajax

Trying to refresh a Google advertisement located within divs that all share a common CSS class called 'adslot'. Some of these divs are loaded via ajax. However, upon document ready, using the jQuery each function only applies to the divs that were loaded before the ajax call. For instance, if we check the number of available '.adslot', it will be 

alert($('.adslot').length);

The output is 5, which is accurate. Three of these divs were generated before the ajax call, and two were generated after.

If I try-

$('.adslot').each(function() {
    var id = $(this).attr('id');
    alert(id);
});

I only receive alerts for the IDs of the first three divs that were generated before the ajax call.

Is there a method to read the IDs of all five divs with jQuery?

javascriptjqueryhtmlcssajax

Answer №1

Experiment with your code within the success callback:

$(function(){
    $.ajax({
        url:....,
        data:...,
        success:function(data){
            $('.adslot').each(function() {
                var id = this.id;
                alert(id);
            });
        }
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Altering Collada texture information during the loading process of the .jpg file

Is there a way to modify the texture image data, such as changing the .jpg header text, when loading the .jpg texture in three.js? I am curious if the texture data is accessible somewhere within the code, possibly as a string. How could I go about this? ...

javascriptcanvasthree.js

Looking to display an input field when a different option is chosen from the dropdown menu?

I'm currently utilizing ng-if to toggle the visibility of an input box. However, whenever I refresh the page, the input box automatically appears and then hides after selecting an option. Below is my code snippet. Any suggestions would be greatly appr ...

javascriptangularjsionic-framework

Adjust the dimensions of the embedded Google document

Currently, I am in the process of developing a website for my initial client and I'm encountering some difficulty in adjusting the size and background color of an embedded google doc. If anyone could provide assistance, it would be greatly appreciated ...

htmlcss

Map does not provide zero padding for strings, whereas forEach does

Currently working on developing crypto tools, I encountered an issue while attempting to utilize the map function to reduce characters into a string. Strangely enough, one function works perfectly fine, while the other fails to 0 pad the string. What could ...

javascripttypescript

Illustration next to content featuring a heading and a paragraph

I've been working on a website design and trying to position text next to an image. It seems like a simple task, but I'm struggling to make it work. Here's an illustration of how I want the layout to look: So far, here is the HTML code I&a ...

htmlcss

"Exploring the World Wide Web with JavaScript and Ajax in Internet

Is there a way to include a Javascript snippet at the end of some ajax content? It seems to be functioning properly in Firefox, but when I try it in Internet Explorer, the script is printed out without being executed. <script type="text/javascript"&g ...

javascriptjqueryajaxinternet-explorer-8

What is the best way to align HTML elements in a single row?

I have the following code snippet... <div class="header"> <div class="mainh"> <div class="table"> <ul> <li><a>smth</a></li> ...

htmlcssalignmenthtml-liststext-align

Skrollr's transformation effect makes the text tremble

Using skrollr.js, I am implementing transition effects on an inner div nested inside another div. The inner div is positioned relatively. Here are my codes: HTML Structure <div class="outer"> <div class="inner-div" style="transition:transform ...

javascriptjquerycssskrollr

I am looking to dynamically load a script only after retrieving specific data from a JSON file in Next.js

I am trying to ensure that the Script tag loads after the data.post.content is loaded within the HTML. Specifically, my goal is to execute the MathJax.js script inside the HTML. This is the code I have: return ( <div> <h1>{data.post ...

javascriptreactjsnext.jsmathjax

Tips on showcasing the elements within a div container using flexbox

Seeking advice on positioning items/cards using flexbox in my initial react app. The issue lies with the div within my card component where applying display: flex; turns every card into a block (column-like) structure, flexing only the content within each ...

javascriptcssreactjsflexboxcss-position

Encountered an issue with reading the property childnotes of null during data retrieval using ajax in PHP

Hello, I am encountering an error while trying to fetch data using ajax. The error message is "Cannot read property 'childNodes' of null". Can anyone help me identify what might be wrong with my code? I have created a form to search for data with ...

javascriptphpjqueryajax

Struggling to access content with Protractor Promise callbacks. What is the best approach for invoking methods on the returned item?

Upon hitting the debugger in the code snippet below, the value of 'thing/item' shows as empty (refer to the image). it('CheckAllLinks:', function () { browser.ignoreSynchronization = true; browser .findElements(by.tagNa ...

javascriptselenium-webdriverjasmineprotractor

In the Redux framework, the reducer fails to identify the action object

I'm currently working on a React project using Redux. I've encountered an issue where my reducer is not recognizing the action type being sent to it, or even the action itself. The error message I am receiving is TypeError: Cannot read property & ...

javascriptreactjsreduxreact-redux

Guide on implementing ng-options and ng-init functionalities in AngularJS

I need help with displaying the ProjectID's in a drop-down list format where users can select one value. Can you provide an example on how to achieve this? [ { "ProjectManagerID": 4, "ProjectID": 4, "ResourceID": 4, "Deleted": false ...

htmlcssangularjsjsontwitter-bootstrap

Utilize JavaScript or Jquery programming to restrict the entry of special characters from the numeric keypad

For the project I'm working on, I need to block users from entering specific characters in a text box: !@#$%^&*(). Can anyone advise me on how to accomplish this using JavaScript/jQuery? The application is built with ASP.NET. ...

javascriptjqueryuser-inputspecial-characters

Trouble with Div Display

I have a section below my form that will show an alert message if there is an error. The issue I am facing is that if I use the inline-block property, everything within the section will be displayed in the alert color. I specifically want the background- ...

htmlcss

execute the changePage() function in jQuery using the data stored in localStorage

In my jQuery mobile page, I have a simple setup: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.2"> <link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" /> < ...

javascriptjqueryhtmljquery-mobile

Is there a way to find keys with matching values within a dictionary?

In my dictionary, I have two sets of identical array values for different keys. My query is: How can I determine which keys have the same value based on inputting just one value? I want to retrieve all keys that share the same values as an output. This i ...

javascriptarraysdictionaryobjectkey

Tips for displaying res.locals information in the console for debugging purposes using ExpressJS and Nodejs

Currently, I am delving into the world of Node.js and ExpressJS as a novice in this realm. My primary requirement is to log the entire or partial content of res.locals in my console for debugging purposes. Here's what I've attempted: var foo_ro ...

javascriptnode.jsdebuggingexpressdata-dumper

Issues with retrieving the output of a function nested within another function through an ajax request

I am attempting to use jQuery to add the results of an ajax call to a paragraph. My goal is to extract the "myResult" variable from the inner getResult function and transfer it to the outer buildParagraph function. Unfortunately, the returned value is und ...

javascriptjqueryhtmlajax