이런 종류의 코드가 항상 작동합니까?

Question

$('#container').append('<div id="theonly">tests</div>').find('#theonly'); 

및

$('#container').html('<div id="theonly">tests</div>').find('#theonly'); 

가끔 걱정 동적으로 생성 된 요소를 한 번에 사용할 수없는, 내가 잘못 여부를 무엇입니까?

내가 잘못하지 않았다면 모든 경우를 해결할 수있는 해결책은 무엇입니까?

수정 누군가가 명확하고 통합 된 답변을 제시 할 수 있습니까?

Answer 1

DOM의 세계에서 "예"로이 질문에 답하는 사람은 미친 사람입니다. 이론적으로이 코드는 항상 작동해야하므로

html(val) 기능은 실제로 당신이 find()

그러나 호출 시간을 기준으로 새 HTML 코드를해야합니다 #container 때문에, 직접 innerHTML을 대체, DOM은 다른 걸쳐 다르게 행동 악명이 높다 브라우저. 그래서 여기서 교훈은 완전히 테스트하는 것입니다.

EDIT : "what is your solution?"

위에서 말했듯이 철저히 테스트해야합니다. 함수 은이 예상대로 작동해야하지만 주요 브라우저를 테스트하지 않으면 확신 할 수 없습니다.

그런데 새로운 HTML이 질의를 할 준비가되어 있다는 구체적인 확인을 원한다면, 먼저 html()을 현재 설정하고 싶은 html과 비교하여 검사하는 설문 조사를 설정할 수 있습니다. 이 같은

뭔가 :

(function ($) { 
    $.fn.htmlX = function (html, callback) { 
     var element = this; 
     var poll = function() { 
      if (element.html() === html) { 
       callback(); 
      } else { 
       setTimeout(poll, 100); 
      } 
     }; 

     element.html(html); 
     poll(); 
    }; 

    $('#container').htmlX('<div id="theonly">tests</div>', function() { $('#container').find('#theonly').css('color', '#f00'); }); 
}(jQuery));