0

divの値が変更されたときにアラートメッセージを表示したい。この値はmodify_divによって変更されています。ボタンをクリックすると、この関数はdivを変更しますが、アラート「値が変更されました」は表示されません。私は何かが足りないのですか？

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"          "      http://www.w3.org/TR/html4/strict.dtd">

  <html>
  <head>
  <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
   <script>


 YUI().use('node', function (Y) {

 var demo = Y.one('#test');
 demo.on('click', function (e) {
    //alert('You clicked me');
});
});

 YUI().use('node','event', function (Y) {

var demo = Y.one('#variable-name');
demo.on('change', function (e) {
    alert('Value changed');
});
});



</script>

<script type="text/javascript">

function modify_div()
{
//var thevar = "This is a test";
var thevar = 7;


document.getElementById('variable-name').innerHTML = thevar;
}
</script>

</head>


<body>


<!-- Click me button -->
<input type="button" id="test" value="Click me" enabled="true" onclick="modify_div();">        </input>


</br>


<div id="variable-name" style="display:inline;">01010101</div>



</body>

</html>
4

2 に答える 2

1

http://www.quirksmode.org/dom/events/change.htmlに基づいて、

change イベントは、そのフォーム フィールドの場合にのみ発生します

例えばinput textarea、select

そのため、div の内容が変更されたときに change イベントは発生しません。

div を入力に置き換えてその値を更新すると機能します。

他のオプションは、変数の値を変更している場所でイベントを手動で発生させることです

http://tech.groups.yahoo.com/group/ydn-javascript/message/13216

次のSOの質問には回答がありますが、jQueryが必要です jQueryで
要素のコンテンツの変更を検出する

于 2012-06-29T21:24:27.243 に答える
1

正しい答えは @ N30 によって与えられました: div の変更イベントはありません。彼は良い代替案を提供していますが、YUI 固有の情報は提供していません。そのため、YUI プラグインの例で彼の回答を拡張したいと思います。

彼が説明したように、基本的な考え方は JavaScript メモリに値を保持し、その値を変更したときにイベントを発生させることです。Y.EventTargetこれは、カスタム イベントを提供する拡張によって行うことができます。

YUI().use('node', 'plugin', function (Y) {
    function NodeValuePlugin(config) {
        // Boilerplate
        NodeValuePlugin.superclass.constructor.apply(this);

        // config.host is the Y.Node instance
        this._node = config.host;
        // we keep the value in a private property
        this._value = this._node.get('text');

        // we publish a 'change' event and set a default
        // function to run when the event is fired
        // This function will change the private property
        // and update the DOM
        // This means you can call e.preventDefault() and
        // stop the default behavior (the change of value)
        this.publish('change', {
            emitFacade: true,
            defaultFn: this._defValueChangeFn
        });
    }
    Y.extend(NodeValuePlugin, Y.EventTarget, {
        set: function (newVal) {
            // we want to do stuff only when the value changes
            if (newVal != this._value) {
                // instead of changing the DOM here,
                // we fire an event and let the event
                // do the work
                // We pass it the new and old values
                this.fire('change', {
                    newVal: newVal,
                    prevVal: this._value
                });
            }
            // make this method chainable
            return this;
        },
        get: function () {
            return this._value;
        },
        _defValueChangeFn: function (e) {
            // sync everything
            this._value = e.newVal;
            this._node.set('text', e.newVal);
        },
        // this is necessary boilerplate for plugins
        destroy: function () {}
    }, {
        // we can access the plugin from node[namespace]
        // in this case, node.value
        NS: 'value'
    });

    var node = Y.one('#test').plug(NodeValuePlugin);
    node.value.on('change', function (e) {
        console.log('Here\'s the old value: ' + e.prevVal);
        console.log('Here\'s the new value: ' + e.newVal);
    });
    // Freebie:
    // since we're using node.set('text', foo)
    // this prevents XSS vulnerabilities
    node.value.set('<a href="#">qwer</a>');

});​

プラグインの詳細については、YUI Web サイトのプラグイン ユーザー ガイドを参照してください。

于 2012-07-05T15:43:14.627 に答える