4

我有一个选择框，我想知道另一个 js 函数何时将选项附加到它。发生这种情况时是否会触发任何事件？

$('select').append('<option>Option 3</option>');
$('select').on('option_appended', function() {
    console.log('Option appended to select box');
});

更改不起作用：http: //jsfiddle.net/CuQjV/

4

2 回答 2

5

最新的方法是Mutation Observers，但支持并不广泛，旧的弃用方法是Mutation Events，它不是非常可靠，并且有些严重降低了 DOM 的性能。你可以这样做。

避免 DOM 突变事件监听器

向文档添加 DOM 突变侦听器会禁用大多数 DOM 修改优化，并严重降低对该文档进行进一步 DOM 修改的性能。此外，移除听众并不能扭转损害。因此，应尽可能避免以下事件：DOMAttrModified、DOMAttributeNameChanged、DOMCharacterDataModified、DOMElementNameChanged、DOMNodeInserted、DOMNodeInsertedIntoDocument、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMSubtreeModified

HTML

<select id="watch">
    <option>Option 1</option>
    <option>Option 2</option>
</select>
<button id="add">Add</button>

Javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */

(function () {
    "use strict";

    if (typeof window.MutationObserver !== "function") {
        window.MutationObserver = window.WebKitMutationObserver || window.MozMutationObserver;
    }

    var watch = document.getElementById("watch");

    function whenClicked() {
        var option = document.createElement("option");

        option.appendChild(document.createTextNode("Option" + Date.now()));
        watch.appendChild(option);
    }

    document.getElementById("add").addEventListener("click", whenClicked, false);

    if (typeof window.MutationObserver !== "function") {
        watch.addEventListener("DOMNodeInserted", function (evt) {
            console.log("New element detected", evt.target);
        }, false);
    } else {
        var observer = new window.MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.type === 'childList') {
                    console.log("New element detected", mutation.addedNodes[0]);
                }
            });
        });

        observer.observe(watch, {
            childList: true,
            characterData: true,
            subtree: true
        });
    }
}());

在jsfiddle 上

注意：我addEventListener在这个例子中使用的，也不是跨浏览器，搜索addevent找到一个跨浏览器的功能。或者使用给定 MDN 页面上的那个。我也使用Array.prototype.forEach了 ECMA5 方法，但是有垫片，或者你可以使用foror重写while。

于 2013-06-27T18:30:04.453 回答
1

只需在添加选项时触发您的自定义事件.trigger('option_appended')

$(document).ready(function() {
    $('select').on('option_appended', function() {
        console.log('changed');
    });

    $('select').append('<option>Option 3</option>').trigger('option_appended');
});

演示--> http://jsfiddle.net/CuQjV/1/

于 2013-06-27T18:15:55.990 回答