Newly added dom elements not being selected

Question

I have an image list that has the ability to load more content via ajax. On default there are images loaded into the list. When the user scrolls another 4 items are added to the list. The list is refreshed via ajax every 15 seconds and just replaces the top 7 items in the list. The problem is when the 4 new items are added to the list the selector seems to ignore those items, so it doesn't select from a 0 index.

I know this sounds confusing so I'll try and demo with a simple example.

Ex

$(function () {
    // Update ChannelStats
    setTimeout(function () {
        var refresh = setInterval(UpdateChannels, 15000);
        UpdateChannels();
    }, 15000);

    function UpdateChannels() {
        $.ajax({
            type: "POST",
            url: "ajax/ImageList.aspx/UpdateImages",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                // Newest
                var $newestResults = $('#newest .pcVideomaincontainer:lt(7)');
                $newestResults.fadeOut('slow'), function () {
                    remove()
                };
                $.each($newestResults, function (index, value) {
                    $(this).delay(index * 250).animate({
                        opacity: 0
                    }, 250,

                    function () {
                        $(this).remove();
                        $('#pcContentHolder_newest').append(data.d.Newest.HtmlChannelSegments[index]);
                    });
                });
            });
        }
    });

[Note the order of the numbers - this is the order the images are loaded]

On initial page load the first images are loaded

　1. On Initial Page Load for following images are loaded

1 2 3 4 5 6 7

　2. When user scrolls the remaining for images are shown

1 2 3 4 5 6 7 8 9 10 11

　3. Update script runs 1st time

8 9 10 11 1 2 3 4 5 6 7

　4. Update script runs 2nd time

4 5 6 7 1 2 3 4 5 6 7

　5. Each and every subsequent time the update script runs the order is

4 5 6 7 1 2 3 4 5 6 7

From what I can tell is that those 4 newly added elements are not included in the $('#newest .pcVideomaincontainer:lt(7)') selection. I'm not sure how I could use "live" in this scenario, or if there is some other technique.

This should have answer to your query : http://stackoverflow.com/questions/3384398/how-to-detect-new-element-creation-in-jquery `:)` or https://developer.mozilla.org/En/DOM_Client_Object_Cross-Reference/DOM_Events — Tats_innit, Jul 06 '12 at 23:31

score 0 · Answer 1 · answered Jul 07 '12 at 00:04

I'm not sure if this is your main problem or not, but this part of your code is missing a $(this). before the remove() and also missing a closing paren. You have this:

            var $newestResults = $('#newest .pcVideomaincontainer:lt(7)');
            $newestResults.fadeOut('slow'), function () {
                remove()
            };

It should be this:

            var $newestResults = $('#newest .pcVideomaincontainer:lt(7)');
            $newestResults.fadeOut('slow'), function () {
                $(this).remove()
            });

Once you fix this, the $newestResults DOM objects will all be removed so I'm unsure why you then try to operate on them again with the following lines of code.

The closing brace in `.fadeOut('slow'), function` is also wrong. — Andreas, Jul 07 '12 at 00:25
I checked out the code and for some reason while copying it or editing it, those things were not included. Assume the code works as the examples highlight — chobo, Jul 10 '12 at 15:50

score 0 · Accepted Answer · answered Jul 10 '12 at 22:30

0

I changed from append to prepend and it works now.

answered Jul 10 '12 at 22:30

chobo

31,561
38
123
191

Newly added dom elements not being selected

2 Answers2