OnSubtreeModified 添加我的功能答案

【问题标题】：OnSubtreeModified add my functionOnSubtreeModified 添加我的功能
【发布时间】：2012-10-19 21:54:51
【问题描述】：

我使用 pie.js (http://css3pie.com/) 一个允许我在 ie6+ 上使用 css3 的库。我在 document.ready 上应用 pie.js ：

 $(document).ready(function(){
        if (window.PIE) {
            $('.vexClass, #vexId').each(function(){
                PIE.attach(this);
            });
        }

    });

我的问题是，当 dom 被修改时，我应用 pie.js 的元素渲染效果不佳，因此我必须在修改 dom 时加载将 pie.js 应用到我的元素的函数，并且仅适用于已应用的部分使用 OnSubtreeModified 或其他技术进行修改...例如，我有一个在加载 dom 时显示的面板，在该面板中，我有一个按钮正在扩展另一个面板，其中包含我想要应用 pie.js 的按钮和其他元素，所以对于主面板，我应用了 pie.js 的所有元素都呈现正常，但扩展面板中的元素 pie.js 没有应用：| 那么，当为扩展面板修改 dom 时，如何注入该 pie.js？

谢谢。

【问题讨论】：

你必须使用 pie.js 而不是 .htc 文件吗？

标签： javascript jquery dom dynamic-html

【解决方案1】：

您是否从 Ajax 调用中获取数据？如果是这样，您需要在回调中添加饼图。不可能（至少 afaik）在给定时间没有的东西上添加任何东西。
如果您需要在回调中添加饼图，您应该为此创建一个单独的函数。你可以给函数一个 dom 节点，它会检查每个子节点是否应用了 pie，如果没有，它就会这样做。

【讨论】：

我使用 wicket，所以 ajax 调用带有 wicket，我不能在回调中添加它：|
我现在不检票了，但是只要数据来自服务器，总会有一个JS回调来正确处理数据。至少如果你设置了一个 JS 函数来这样做...... .
我想在 ajax 调用时使用类似 onreadystatechange 的东西 :)

【解决方案2】：

您不能使用DOMSubtreeModified 事件，因为旧版本的 IE（您的目标）不支持此功能。但是，您可以通过将此答案 Detect changes in the DOM 与此脚本一起使用来解决此问题：

$(document).ready(function () {

    function applyPIE() {
        if (window.PIE) {
            $('.vexClass, #vexId').not('[data-pie=attached]').each(function(){
                PIE.attach(this);
                $(this).attr('data-pie', 'attached');
            });
        }
    }

    onDomChange(function(){ 
        alert('document updated, applying PIE now');
        applyPIE();
    });

    $('#link').click(function () {           
        $('body').append('<h4>added content</h4>');
    });

    applyPIE();

});

它创建了一个本地函数applyPIE()，它在文档就绪时调用，并且每次 DOM 发生变化时都会被调用——过滤掉已经处理过的元素。您可能需要扩展 .vexClass, #vexId 选择器集以满足您的需求。

JSFiddle：http://jsfiddle.net/hongaar/y3FaM/1/

【讨论】：

@burebistaruler 的回答可能会更好地解决您的问题

【解决方案3】：

如果您使用检票口，唯一的方法是通过Wicket.Ajax.registerPostCallHandler 将此添加到您的项目中，每次完成 ajax 请求时都会应用您的饼图。

window.document.ready = function() {
    Wicket.Ajax.registerPostCallHandler(pieStarter);
}
function pieStarter() {

    if (window.PIE) {
        go();
    }
}
function go() {
    $(''.vexClass, #vexId'').each(function() {
        PIE.attach(this);
    });
}

【讨论】：