bootstrap table onPostBody事件

Question

我在bootstrap table中的field中定义的formatter

formatter:function(value,row,index){
if (value == undefined) {
value = "选择";
}
var html = "";
html += "";
html += "-";
html += "";
return html;
}

我想在onPostBody事件中获取$('.traningHour_date')元素，为什么会获取不到，onPostBody方法不就是在dom加载完成之后触发的事件吗？ 为什么在onPostBody中获取的$('.traningHour_date').length为0，实际应该为12。

请教大神，这是为什么？什么时机才能获取到$('.traningHour_date')元素？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

onPostBody事件是在DOM完全加载完成后触发的。在这个事件中，你不能直接操作DOM节点，因为它们可能还没有在页面上渲染出来。因此，在这个事件中无法获取.traningHour_date元素。

如果你想要在特定的时间点（比如当用户点击按钮时）获取到DOM节点，你可以使用onInit或onLoad事件。这两个事件可以在DOM完全加载后执行，所以你应该能够获取到你需要的元素。

例如：

$('#myButton').click(function() {
    // 获取所有`.traningHour_date`元素
    $('.traningHour_date').each(function() {
        console.log($(this).text());
    });
});

这段代码会在用户点击按钮时获取所有.traningHour_date元素，并打印出每个元素的内容。

另外，如果你的数据是动态加载的，那么你需要确保在数据加载完毕后再进行DOM操作。这可以通过监听data-loading-start和data-loading-end事件来实现：

$(document).ready(function() {
    $('#myButton').click(function() {
        // 获取所有`.traningHour_date`元素
        $('.traningHour_date').each(function() {
            console.log($(this).text());
        });

        // 当数据加载开始时调用此函数
        dataLoadingStart();

        // 在数据加载结束后调用此函数
        dataLoadingEnd();
    });
});

function dataLoadingStart() {
    // 操作DOM
}

function dataLoadingEnd() {
    // 操作DOM
}

这样，即使数据正在加载中，你也能够在正确的时候处理DOM操作。