jQuery AJAX - DOM 요소 만들기

jQuery에서 AJAX 및 PHP로 새 게시물을 얻는 중입니다. 그런 다음 새 div를 만들고 해당 게시물을 추가합니다.jQuery AJAX - DOM 요소 만들기

function getMorePosts(latestPost){ 

    $.ajax({ 
     type: "POST", 
     url: "/includes/classes/handler.php?do=getMorePosts", 
     data: "&latestPost="+latestPost, 
     cache: false, 
     success: function(data){ 
      if(data){ 
       $('#addUpdate textarea').val(''); 
       $('<div id="newPosts"></div>').insertAfter('.myDeskAdd'); 
       $(data).prependTo('#newPosts'); 
      } 
     } 
    }); 
    return false; 
}

이제 데이터를 HTML 코드의 모든 내 handler.php에서입니다 :

여기 내 코드입니다. 모든 것이 작동하고 추가되며 결과를 화면에서 볼 수 있습니다. 그리고 그것은 정확합니다.

여기 내 문제가 있습니다 : 화면에 추가되면 DOM 요소를 '사용'할 수없는 것 같습니다. 예 : 클릭 할 수있는 이미지가 있고 jQuery에서 경고를 호출해야하지만 그렇지 않습니다. 그리고 생성 된 dom 요소에 바인딩 된 다른 모든 jQuery 효과는 작동하지 않습니다.

F5 키를 누르면 작동하지 않는 요소가 작동합니다.

나는 html(), prepend(), append() 등을 시도했습니다.

출처

2012-03-14 skolind

당신은 다시 바인드 이벤트 핸들러에 컨텐츠가 페이지에 추가됩니다 후이. 이벤트를 위임하려면 jQuery의'on'을보십시오. –

이벤트 처리기를 리 바인드하려면 어떻게합니까? 내가 살펴 보겠다 On – skolind

모든 동적 콘텐츠 (ajax에서로드 됨)의 경우 jQuery ()를 사용하는 메서드를 바인딩합니다.그런 다음

$(".imageClass").click(function(){ 
    alert($(this).html());  
});

사용, 대신의

작동합니다

$(".yourContainerDiv").on("click", ".imageClass", function(event){ 
    alert($(this).html());  
});

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

출처

2012-03-14 13:04:28 Shyju

정상적인 click() 메서드를 완전히 제거하고 대신 .on()으로 바꿀 수 있습니까? 또는 내 함수 getMorePosts()에서 on()을 사용해야합니까? ? – skolind

예. on 코드로 대체하십시오. – Shyju

그러나 스타 img를 클릭 할 때 요소에 핸들러를 바인딩 할 필요가 없습니다. Ajax 함수로 새로로드 된 요소에 핸들러를 바인딩해야합니다. 내가 어떻게 그럴 수 있니? – skolind

이벤트를 새로 추가 된 DOM 요소에 바인딩하려면 적절한 매개 변수를 사용하여 live() 또는 on()을 사용해야합니다.

출처

2012-03-14 13:03:28

live()가 더 이상 사용되지 않음 – Starx

이벤트 위임을 사용하지 않는 한 이벤트 처리기는 바인딩 할 코드가 실행될 때만 존재하므로 나중에 동적으로 추가되는 요소에는 이벤트 처리기가 바인딩되지 않으므로 기능이 작동하지 않습니다 .

이벤트 위임에 대한 자세한 내용은 .on() (jQuery 1.7+) 또는 .delegate() (jQuery 1.7 이전) 함수를 살펴보십시오.

출처

2012-03-14 13:04:02

요소가 동적으로 생성되면 이전 이벤트 핸들러에 연결되지 않습니다.

당신은 사용해야합니다. on() 이벤트 핸들러를 위임하는 메소드.

예 :

$(".yourmajoreventhandler").on('click', function() { 
    //do your stuff 
});

위임 예 :

$("body").on('click', ".yourmajoreventhandler", function() { 
    //do your stuff 
});

이제 때마다, 당신은 위의 기능을 실행할 클래스 yourmajoreventhandler있는 요소를 생성합니다.

출처

2012-03-14 13:04:04 Starx

동적으로 생성 된 내용에 필요한'.on()'의 사용법은 이벤트 위임을 설정하지 않았다. –

@AnthonyGrist, 맞습니다. 논평하기 전에 조사를 해보 시지 않겠습니까? – Starx

@AnthonyGrist, [this] (http://jsfiddle.net/Starx/TSqbs/1/) 데모를 확인하십시오. "$ (element) .on"click ","selectors ", function() {} 내 포인트를 증명하는 또 다른 답변 – Starx

추가중인 DOM 요소에 이벤트가 어떻게 바인딩됩니까? 요소의 속성입니까? 아니면 jQuery를 사용하여 바인딩합니까? 이전 코드 인 경우 더 많은 코드를 게시해야하지만 후자의 경우라면 jQuery's on method을 사용하여 이벤트를 바인딩해야합니다.

이벤트를 바인딩하면 현재 존재하는 요소에만 적용됩니다. 그들은 새로운 요소로 전파되지 않습니다. on() 메서드를 사용하면이 문제를 해결하기 위해 모든 새 요소에 바인딩 할 수도 있습니다.

출처

2012-03-14 13:04:12 jasonlfunk

jQuery AJAX - DOM 요소 만들기

답변

관련 문제