1

ゴール：

機能を備えたDOM要素を追加します。（1人のグローバルリスナーはここでは欲求ではありません。）

問題：

このコンテキストで新しい要素を参照する方法がわかりません。問題の領域は、.onイベントリスナーと$(this)内部に含まれるへの参照です。get_value()また、関数が内部から自分自身を再度呼び出す機能。

関連コード：

var dom_element = (function() {
    // [...]
    var create = function create( data ) {
        // [...]
        return $('<div />', { 'class': 'element', id: data.i_id })
            // [...]
            .on('load', function get_value() {
                // [...]
                $(this).find('.value').text(s_value);
                // [...]
                setTimeout('get_value()', 5000);
            }());
    },
    // [...]
    return {
        create: create
    };
}());
4

3 に答える 3

3

loadイベントは要素では機能しません<div>。

のコンテンツが更新されたときに何らかのアクションを実行する場合は、コンテンツdivを更新するコードで実行する必要があります。

var dom_element = (function() {
    // [...]
    var create = function create( data ) {
        // [...]
        var div =  $('<div />', { 'class': 'element', id: data.i_id })
            // [...]
        (function get_value(div) {
            // [...]
            $(div).find('.value').text(s_value);
            // [...]
            setTimeout(function() {
                get_value(div);
            }, 5000);
        })(div);

        return div;
    },
    // [...]
    return {
        create: create
    };
}());

私はあなたが探していると思うことをするためにコードを更新しました。

于 2012-04-16T18:58:10.960 に答える
1

別の人が言ったように、 on.('load'...) はここでは適用されません。これらの要素を動的に作成しているため (おそらく DOM の準備が整った後)、すぐにタイムアウトを開始できるはずです。これが私の見解です：

var make_new = function(data){
    var $div = $('<div>', {'class': 'element', 'id':'element_'+data});
    var func = function(){
        // closure has formed around data, $div, and func
        // so references to them here reference the local versions
        // (the versions outside this immediate function block. i.e,
        // inside this call of make_new)
        data++;
        $div.text($div.attr('id') + ":" + data);
        setTimeout(func, 1000);
    };
    func();  //start process rolling
    return $div;
};

基本的に、js クロージャーを利用して、必要な参照を取得する必要があります。func() は div 要素を返す前に呼び出されますが、要素と func の両方を返し、後で func() を呼び出すことを妨げるものは何もありません。

ここの jsfiddle をチェックしてください: http://jsfiddle.net/gRfyH/

于 2012-04-16T19:25:46.733 に答える
0

イベント ハンドラーのスコープは常に要素であるため、作成されたfromthisを参照するためにすべてのことを正しく行っていることになります。<div>get_value

ただし、タイムアウトから呼び出すとget_value、グローバル コンテキストで実行されます。したがってbind()、要素を渡す前に関数を要素に渡す必要がありsetTimeoutます。

setTimeout(get_value.bind(this), 5000);

または、手動で行います。

var el = this;
setTimeout(function() {
    get_value.call(el);
}, 5000);
于 2012-04-16T19:01:05.237 に答える