Question

注意虽然我会尊重牛群的智慧，但我不同意这是重复的（至少没有链接），我无法在链接页面上找到问题的答案。

目标：

通过ajax
根据数据属性中的信息修改新加载元素的css。

困境：

完成上述（1）后，新加载的选择器似乎不可用。我一直在尝试使用jQuery.on()的变体来尝试让jQuery注册这些新添加的DOM元素。但我不需要事件处理;我想立即改变一些新到的元素的CSS。我已经尝试了十几种变体，其中大部分尝试使样式更改在 AJAX.success()回调中，而不是在之后;这只是我最后的努力。

这个有是简单的东西，但我是一个小时，我jsut看不到它...

以下是加载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>

Aaaa和我的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

如果事件委托对load事件不起作用，则需要在回调中调用该函数：

$("#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);
            });
        });

    });
});

在AJAX调用之后，新加载的CSS选择器不可用于jQuery.each（）

1 个答案: