javascript - jQuery 触发器在将 <li> 添加到 <ul> 时触发方法

Question

我有一个使用 flush() 的 PHP 页面和 ob_flush()将进度输出到浏览器。该页面正在输出样式 <ul class="progresslog">哪里个人<li class="{success|warning|error}">元素正在刷新到浏览器。

我希望隐藏任何成功的东西，但显示任何有错误的东西。目前，任何错误都在成功的进度通知中“丢失”。这可以通过 <li> 上的不同类轻松实现。和一些 jQuery .slideUp()和 .slideDown()如果用户希望看到它们，则显示成功的方法。

然而，假设进展成功，则不会向用户显示任何内容，让他们担心是否有任何进展。我想要一个摘要链接文本来更新为额外的 <li>的被添加到列表中以显示类似于 22 success notifications 的内容.我希望这个数字随着收到输出而攀升。

我有代码来更新 <a id="progresslogtoggle"> 中包含的文本元素。它看起来像这样:

function updateProgress()
{
    var count = $('.progresslog .success').length;
    var warnings = $('.progresslog .warning').length;
    var errors = $('.progresslog .error').length;
    if (count > 0)
    {
        $('#progresslogtoggle').html ('Show ' + count + ' success notice' + (count != 1 ? 's' : '') + '. (' + warnings + ' warning' + (warnings != 1 ? 's' : '') + ' and ' + errors + ' error' + (errors != 1 ? 's' : '') + ' already shown)');
    }
    else
    {
        $('#progresslogtoggle').html ('There are no success notices to show! (' + warnings + ' warning' + (warnings != 1 ? 's' : '') + ' and ' + errors + ' error' + (errors != 1 ? 's' : '') + ' already shown)');
    }
}

目前，一旦列表完成，最后的 </ul>添加后，我还添加了一个 JavaScript 片段来调用此 updateProgress()功能。

但是，我想在元素添加到列表时更新链接。我试过:

$('.progresslog').on ('change', updateProgress());

但它似乎没有将添加子项注册到列表中作为更改。

我该如何解决这个问题？

更新:

PHP 代码(大大简化，但足以说明问题):

echo "<a href=\"javascript:void(0);\" id=\"progresslogtoggle\">Please wait...</a></p>";
echo '<ul class="progresslog">';
// JS, as above, goes here, including an initial call to the function.
for ($i = 0; $i < 1000; $i ++)
{
    // some lengthy process that takes time
    sleep (1); // NOT REAL CODE!

    echo '<li class="';
    echo ($i % 5 == 0) ? 'warning' : 'success';
    echo '">Notice ' . $i . '</li>';
    flush ();
    @ob_flush ();
}
echo "</ul>";
echo "<script type=\"text/javascript\">updateProgress();</script>";

免责声明:我意识到使用不完整的 DOM 是不好的，我不想在这里讨论这个问题。

Answer 1

尝试使用 MutationObserver ，观察 ul 元素的 childList。

另见 question .