在AJAX调用之后，新加载的CSS选择器不适用于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:

1. Load HTML to element via ajax
2. 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);
        });

    });
});

Answer 1

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);
            });
        });

    });
});