2011-01-15 5 views
1

시간을내어 주셔서 감사합니다.jQuery : 바인드 생성 요소

필자는 처음으로 jQuery 플러그인을 작성하려고 시도하고 있으며 내 첫 번째 문제에 부딪혔다. 플러그인은이 첫 번째 옵션 (정수)을 취하고, 동적으로 PHP에 의해 생성되는 HTML 컨텐츠를 반환이

<div id="kneel"></div> 
<script type="text/javascript"> 
$("#kneel").zod(1, { }); 
</script> 

처럼라고합니다. 생성 된 콘텐츠는 폼 버튼을 비활성화하고 ajax 데이터를 반환하는 이벤트를 클릭하는 등 다양한 기능으로 바인딩해야합니다.

플러그인은 다음과 같습니다 (문제가 발생할 경우 전체 플러그인을 포함 시켰습니다). ..

(function($){ 
    $.fn.zod = function(id, options) { 

    var settings = { 
     'next_button_text': 'Next', 
     'submit_button_text': 'Submit'  
    }; 

     return this.each(function() {   
      if (options) { 
       $.extend(settings, options); 
     } 

     // variables 
     var obj = $(this); 

     /* these functions contain html elements that are 
     generated by the get() function below */ 

     // disable some buttons 
      $('div.bario').children('.button').attr('disabled', true); 

     // once an option is selected, enable the button 
      $('input[type="radio"]').live('click', function(e) { 
      $('div.bario').children('.button').attr('disabled', false); 
      }) 
     // when a button is clicked, return some data 
      $('.button').bind('click', function(e) { e.preventDefault(); 
      $.getJSON('/returnSomeData.php, function(data) { 
      $('.text').html('<p>Hello: ' + data + '</p>'); 
      }); 

    // generate content, this is the content that needs binding... 
    $.get('http://example.com/script.php?id='+id, function(data) { 
     $(obj).html(data); 
    }); 

    }); 

    }; 
})(jQuery); 

나는 데 문제가 작성 기능이 생성 된 내용을 실행하기 위해 생성 콘텐츠와 결합되지 않는 것입니다. 나는 get() 기능에 의해 생성 된 컨텐츠를 결합하려면 어떻게합니까?

+0

오타 일 수도 있지만 귀하의 $ .getJSON 메서드 호출에 귀하의 URL에 끝 인용 부호가 없습니다. – Vadim

답변

4

당신은 할 수있다 유용 할 .delegate 또는 .live을 찾으십시오. 그들은 abl입니다 e 호출시 발견 된 문서 대신 이벤트를 문서의 현재 및 미래 요소에 바인드합니다.

편집

여기

무슨 뜻인지의 작업 예이다 : 나는 대리인 기능에 더 통화를 할 수없는 http://www.jsfiddle.net/bradchristie/39Gt5/ 참고하지만, 새로운 단락과 버튼을 클릭하는 버튼을 추가 클릭 이벤트는 자동으로 바인딩됩니다.

이 게시물을 발견하고 JQuery와 1.8 이상, .delegate/.livedeprecated되었습니다 및 .on로 대체 한을 사용하여 당신의 사람들을 위해

UPDATE. 연결된 참조는 새로운 .on() 메서드를 사용하도록 코드를 변환하는 방법에 대한 예를 보여줍니다.

관련 문제