함수를 부착하는 것은 동적 DOM 요소를 생성하는

기능성와 DOM 요소를 추가. (한 글로벌 리스너는 여기에 원하는되지 않습니다.)

문제 :이 상황에서 새로운 요소를 참조하는 방법을 모른다

합니다. 문제가있는 영역은 .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 
    }; 
}());

출처

2012-04-16 Donnie

는 setTimeout', 그것은 그들을 eval's''에 문자열을 통과하지 마십시오. 전달 함수 :'setTimeout (get_value, 5000);'. –

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-16 18:58:10

그는'mutation events'도 사용할 수 있습니다. (그래, 나는 그들이 더 이상 사용되지 않는다는 것을 알고있다 ...) – gdoron

@ gdoron : "돌연변이 사건"은 무엇인가? –

@gdoron : True. 나는 처음에 코드의 의도를 오해하고 있다고 생각합니다. 한 간격에 대한 업데이트 일뿐입니다. –

A 이벤트 핸들러의 범위는 그래서 당신은 바로 get_value에서 생성 된 <div>을 참조하기 위해 최선을 다하고있는 this를 사용하여, 항상 요소입니다.

그러나 get_value을 제한 시간에서 호출하면 전역 컨텍스트로 실행됩니다.

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

또는 수동으로 수행 : 그래서 당신은 setTimeout에 전달하기 전에 요소에 대한 기능을 bind()해야합니다. 다른로서

var el = this; 
setTimeout(function() { 
    get_value.call(el); 
}, 5000);

출처

2012-04-16 19:01:05 Bergi

는 말했다에 ('로드'를 ...)는 여기에 적용되지 않습니다. 이 요소들을 동적으로 생성하고 있습니다 (아마 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 요소를 반환하기 전에 호출되지만, element와 func를 모두 반환하지 않고 func()를 나중에 호출하는 것을 막을 수있는 방법은 없습니다. 여기의 jsfiddle

체크 아웃 : http://jsfiddle.net/gRfyH/

출처

2012-04-16 19:25:46

함수를 부착하는 것은 동적 DOM 요소를 생성하는

답변

관련 문제