0

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

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

这使得所有选择框都像“select2”一样进行转换。但是现在我正在单击按钮生成表格（在文档准备好之后），因此新生成的选择框看起来不像“select2”，如果有任何功能可以检测到文档的变化，请帮助我？
就像是：

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

4 回答 4

2

至少在某些浏览器中（不是任何当前版本的 IE），您可以通过 a 执行此操作MutationObserver（这是新的 DOM4 事物，而不是您想要远离的旧 DOM3 突变事件）。

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

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

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

...并轮询检查其长度（NodeLists 是实时的，您不必重新查询）：

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

您可以在它们上放置一个类以跟踪哪些已经完成（如果select2还没有这样做）。

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

于 2013-07-05T08:05:20.680 回答
1

你可以尝试这样的事情：

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 事件，因为它们已被弃用。

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

于 2013-07-05T08:01:40.447 回答
0

你可以试试DOMNodeInsertedIntoDocument

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

}

或突变观察者

于 2013-07-05T08:02:26.963 回答
0

使用这个 id 或类

在这段代码中

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

//here  the code
于 2013-07-05T08:02:39.873 回答