After AJAX call, newly loaded CSS selectors not available to jQuery.each()

Question

NOTE Though I'll defer to the wisdom of the herd, I don't agree that this is a duplicate (at least not as linked), and I was unable to find the answer to my problem on the linked page.

Goal:

Load HTML to element via ajax
Modify css of newly loaded elements based on information in data-attributes.

Dilemma:

After finishing (1) above, the newly loaded selectors don't seem to be available. I've been trying variations of jQuery.on() to try to get jQuery to register these newly added DOM elements. But I don't need event handling; I want to immediately alter the CSS of some of the newly arrived elements. I've tried a dozen variations on the below—most of which attempt to make the style changes within the AJAX.success() callback, rather than after it; this was just my last effort.

This has to be something simple, but I'm an hour in and I jsut can't see it...

Here's a sample of the loaded HTML:

<div class="jsonprinter-row indented-0 odd-row has-children" data-tab-offset="0" data-key-offset="0">
    <div class="jsonprinter-key">category</div>
    <div class="jsonprinter-list">
        <div class="jsonprinter-row indented-1 even-row" data-tab-offset="1" data-key-offset="10">
            <div class="jsonprinter-key">key</div>
            <div class="jsonprinter-value">val</div>
        </div>
    </div>
</div>

Aaaaand my JS:

var tab_size = 8;
var monospace_char = 3;

function updatePrintedRows(element) {
        var data = $(element).data();
        var width = data['tab-offset'] * tab_size + data['key-offset'] * monospace_char;
        $(element).css({"padding-left": toString(width)+"px"});
}
// note that I've tried both:
$(".jsonprinter-row").on("load", function() {
    updatePrintedRows(this);
});

// and also:
    $(document).on("load", ".jsonprinter-row", function() {
        updatePrintedRows(this);
    });
$("#printsheet").on('click', function() {
    $("#sheet-view").html( function() {
        var sheetData = // points to a Js object
        $.get("sheet_string.php", {sheet:sheetData}, function(data) {
            $("#sheet-view-content").html(data);
        });

    });
});

@Barmar So... if you read my question, I am already trying $jQuery.on() and it's not working, which is why I posted my question... I'm all for flagging duplicates, but might care to read the question fully first... — Jonline, May 16 '14 at 23:15
You're not using the delegation syntax of `on`. It should be `$(document).on("load", ".jsonprinter-row", function() { ...})` — Barmar, May 16 '14 at 23:16
That, meanwhile, is helpful—thanks. But—this doesn't change anything at all, for me... Any idea why? All my other JS is running fine (3000+ lines of custom code), so I am really stumped. — Jonline, May 16 '14 at 23:18
@Barmar No disrespect guy, but, the link you sent me to as a duplicate specifically is dealing with event bindings, which—barring the `.load()` event (which I currently can't seem to bind to)—is precisely what I don't need to address (or so I seem to think). But by marking this as a dup, you've also effectively preempted any chance of getting help. : / — Jonline, May 16 '14 at 23:26

score 1 · Accepted Answer · answered May 16 '14 at 23:31

If event delegation doesn't work for the load event, you need to call the function in the callback:

$("#printsheet").on('click', function() {
    $("#sheet-view").html( function() {
        var sheetData = // points to a Js object
        $.get("sheet_string.php", {sheet:sheetData}, function(data) {
            $("#sheet-view-content").html(data);
            $("#sheet-view-content .jsonprinter-row").each(function() {
                updatePrintedRows(this);
            });
        });

    });
});

Brilliant, thanks. This is a very subtle difference from the page you linked, works a charm. — Jonline, May 16 '14 at 23:35

After AJAX call, newly loaded CSS selectors not available to jQuery.each()

1 Answers1