DOM에 아직 추가되지 않은 JQuery 개체에 클릭 이벤트 첨부

DOM에 아직 추가되지 않은 JQuery 개체에 클릭 이벤트 첨부

이 질문에는 이미 다음과 같은 답이 있습니다.

동적으로 생성된 요소에 대한 이벤트 바인딩? (23개 답변)

마감됨5년 전에.

JQuery 객체를 DOM에 추가하기 전에 클릭 이벤트를 JQuery 객체에 첨부하는 데 많은 문제가 있었습니다.

기본적으로 저는 제 기능이 반환하는 이 버튼을 가지고 있고, 그것을 DOM에 추가합니다.제가 원하는 것은 버튼을 자체 클릭 핸들러로 되돌리는 것입니다.DOM에서 핸들러를 부착하기 위해 선택하고 싶지 않습니다.

내 코드는 다음과 같습니다.

createMyButton = function(data) {

  var button = $('<div id="my-button"></div>')
    .css({
       'display' : 'inline',
       'padding' : '0px 2px 2px 0px',
       'cursor' : 'pointer'
     }).append($('<a>').attr({
       //'href' : Share.serializeJson(data),
       'target' : '_blank',
       'rel' : 'nofollow'
     }).append($('<image src="css/images/Facebook-icon.png">').css({
       "padding-top" : "0px",
       "margin-top" : "0px",
       "margin-bottom" : "0px"
     })));

     button.click(function () {
        console.log("asdfasdf");
     });

     return button;     
}

반환되는 버튼은 클릭 이벤트를 수신할 수 없습니다.그러나 이렇게 하면(버튼이 DOM에 추가된 후):

$('#my-button').click(function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

효과가 있습니다...하지만 내가 원하는 것은 아닙니다.

그것은 그 물체가 아직 DOM의 일부가 아니라는 사실과 관련이 있는 것 같습니다.

아! 참, 저는 OpenLayers와 함께 작업하고 있습니다. 제가 버튼을 추가하는 DOM 객체는 OpenLayers입니다.FramedCloud(아직 DOM의 일부는 아니지만 몇 가지 이벤트가 트리거되면 이 클라우드가 포함됩니다.)

이걸로.본문을 돔 준비에 존재하는 모든 상위 요소로 바꿀 수 있습니다.

$('body').on('click', '#my-button', function () {
     console.log("yeahhhh!!! but this doesn't work for me :(");
});

1.7+ 기준으로 라이브(live)를 대체할 때 사용하는 방법에 대한 자세한 내용은 여기 http://api.jquery.com/on/ 를 참조하십시오.

아래에는 사용해야 하는 버전이 나열되어 있습니다.

$(selector).live(이벤트, 데이터, 핸들러); // jQuery 1.3+

달러(약)delegate(선택기, 이벤트, 데이터, 핸들러); // jQuery 1.4.3+

$(문서).on(이벤트, 셀렉터, 데이터, 핸들러); // jQuery 1.7+

아직 아무도 이 글을 올리지 않았다는 것이 정말 놀랍습니다.

$(document).on('click','#my-butt', function(){
   console.log('document is always there');
}) 

해당 페이지에 어떤 요소가 표시될 것인지 확실하지 않으면 다음에 첨부하십시오.document.

참고: 이는 성능 측면에서 차선입니다. 삽입할 요소의 가장 가까운 상위 요소에 연결하여 최대 속도를 얻으려고 시도해야 합니다.

이것을 시도해보세요.본문을 상위 선택기로 교체

$('body').on('click', '#my-button', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

시도:

$('body').on({
    hover: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    },
    click: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    }
},'#my-button');

jfiddle 예제

.on()을 사용하고 동적 요소에 바인딩할 때는 페이지에 이미 존재하는 요소(예: 본문)를 참조해야 합니다.성능을 향상시킬 수 있는 보다 구체적인 요소를 사용할 수 있다면,

이벤트 핸들러는 현재 선택된 요소에만 바인딩되며 코드가 .on()으로 호출할 때 페이지에 존재해야 합니다.요소가 존재하고 선택 가능하도록 하려면 페이지의 HTML 마크업에 있는 요소에 대해 문서 준비 처리기 내에서 이벤트 바인딩을 수행합니다.새 HTML이 페이지에 주입되는 경우 새 HTML이 페이지에 배치된 후 요소를 선택하고 이벤트 핸들러를 첨부합니다.또는 다음 설명에 따라 위임된 이벤트를 사용하여 이벤트 핸들러를 첨부합니다.

Src: http://api.jquery.com/on/

추가하셔야 합니다.다음을 사용하여 요소를 작성합니다.

var $div = $("<div>my div</div>");
$div.click(function(){alert("clicked")})
return $div;

그러면 당신이 추가하면 작동합니다.

여기서 예를 살펴보고 여기서 간단한 버전을 살펴보십시오.

.on()을 사용하여 최근 로드된 테이블 셀 내부의 입력에 바인딩된 이벤트를 청취하는 사용자를 위한 정보 보완. 대리자()를 사용하여 이벤트 핸들러를 해당 테이블 셀에 바인딩할 수 있었지만 .on()이 작동하지 않았습니다.

테이블 ID를 .delegate()로 바인딩하고 입력을 설명하는 선택기를 사용했습니다.

예.

HTML

<table id="#mytable">
  <!-- These three lines below were loaded post-DOM creation time, using a live callback for example -->
  <tr><td><input name="qty_001" /></td></tr>
  <tr><td><input name="qty_002" /></td></tr>
  <tr><td><input name="qty_003" /></td></tr>
</table>

jQuery

$('#mytable').delegate('click', 'name^=["qty_"]', function() {
    console.log("you clicked cell #" . $(this).attr("name"));
});

.live를 사용하는 것이 당신에게 효과가 있습니까?

$("#my-button").live("click", function(){ alert("yay!"); }); 

http://api.jquery.com/live/

편집

jQuery 1.7에서 .live() 메서드는 더 이상 사용되지 않습니다..on()을 사용하여 이벤트 핸들러를 연결합니다.이전 버전의 jQuery 사용자는 .live()보다 .delegate()를 사용해야 합니다.

http://api.jquery.com/on/

행사시

$('#my-button').on('click', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

또는 추가 후 이벤트 추가

jQuery.on 메서드는 페이지 로드 시 요소가 없어도 이벤트를 바인딩하는 데 사용됩니다.다음은 링크입니다. 이 링크는 다음과 같이 사용됩니다.

 $("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
 });

jquery 1.7 이전에는 .live() 메서드가 사용되었지만 지금은 더 이상 사용되지 않습니다.

bind()가 도움이 될 수 있습니다.

button.bind('click', function() {
  alert('User clicked');
});

언급URL : https://stackoverflow.com/questions/10920355/attaching-click-event-to-a-jquery-object-not-yet-added-to-the-dom