Question

我有一个HTML页面，其中包含许多选择框，以美化我使用过“select2”的那些盒子，我所做的是：

$(document).ready(function() { $("select").select2(); });

这使得所有选择框都变换为“select2”。但是现在我按下按钮生成表格（在文档准备好之后），因此新生成的选择框看起来不像“select2”，如果有任何功能检测到文档中的变化，请帮助我吗？登记/> 类似的东西：

$(document).change(function() { $("select").select2(); });

Answer 1

至少some browsers（不是当前版本的IE），你可以通过MutationObserver执行此操作（这是新的DOM4，不是旧的DOM3突变事件，你想远离它们。）

但我不推荐它，只需在添加新选择的代码后再次调用select2。

另一种选择是使用计时器：获取页面上所有NodeList元素的select个：

var allSelects = document.getElementsByTagName('select');

...并且轮询检查其长度（NodeList s 实时，您不必重新查询）：

var lastLength = 0;
setInterval(function() {
    if (allSelects.length !== lastLength) {
        lastLength = allSelects.length;
        // Hook up the new ones here
    }
}, 1000); // 1000ms = 1 second

您可以在其上放置一个类来跟踪哪些已经完成（如果select2尚未执行此操作）。

但同样，你有代码添加select元素，只需在那里重新触发。

Answer 2

您可以尝试这样的事情：

function checkDocumentChange() {
  // Run a simple task to check whether any new "selects" were added
  var old_value = checkDocumentChange.num_selects || 0;
  var new_value = $("select").length;

  if (old_value != new_value) {
    $("select:not(.already_done)").select2();
  }

  checkDocumentChange.num_selects = new_value;
  setTimeout(checkDocumentChange, 100);
}

建议不要使用DOM事件，因为它们是deprecated。

当然，更好的方法是在将.select2()插入DOM后立即调用select。这样您就不必将其委托给某些检查器或事件。

Answer 3

您可以尝试DOMNodeInsertedIntoDocument

$(document).on('DOMNodeInsertedIntoDocument', function() {

}

或mutation observer

Answer 4

使用此ID或类

在此代码中

var id = document.getelementbyid("id for select 1 or 2");

//here  the code

javascript中是否有任何函数来检测文档中的更改？

4 个答案: