jQuery를 사용하여 AJAX 성공 후 동적으로 생성 된 div에 추가

Question

AJAX 폴링 시스템 인 WordPress 용 플러그인 WP-Polls을 사용하고 있고 처음에 숨겨진 div (.comment-block)를 새 div에 추가하려고합니다. .voted)은 AJAX 성공시 WP-Polls 플러그인에 의해 DOM에 동적으로 삽입됩니다. 사용자가 투표 버튼 (.Buttons)을 선택하고 클릭하면 DOM은 .voted 클래스의 새 (빈) div 추가를 반영하여 업데이트됩니다. 이전에 비슷한 질문을했지만 더 관련성 높은 새로운 스레드를 열어 보겠다고 생각했습니다.

참고 : .voted 사업부는 템플릿을 통해 만들어진이 대시 보드에서 WP-설문 조사 제공. 플러그인은 " 전에 사용자가 투표했습니다"및 "사용자가 투표를 한 후에"템플릿을 제공하고 <div class="voted"></div>과 같이 후자에 div를 삽입했습니다. div에 내용을 직접 추가 할 수없는 이유는 div에있는 내용 (.comment-block)이 플러그인 문의 양식 7에 의해 작성된 연락처 양식이고 PHP 문이 필요하기 때문입니다. 템플리트에는 HTML 만 사용할 수 있습니다.

.on을 사용하려고 시도했지만 .Buttons을 클릭하면이 기능이 활성화됩니다. 그러나 DOM에서는 아무 것도 변경되지 않았습니다.

$(document).on('click', '.Buttons', function() { 
    $('.comment-block').appendTo('.voted'); 
}); 

아래는 HTML입니다. 이것은 사용자가 투표하기 전에이다 :

<div id="poll"> 
    (poll here) + .Buttons vote button     <-- in here----------| 
</div>                  | 
<div class="comment-block" style="display:none">  <-- I want this div | 
    <?php echo do_shortcode('[contact-form-7]'); ?> 
</div> 

그리고 이것은 사용자가 투표 후 나는 그것을보고하는 방법이다 : 사람이 나에게 길을 보여줄 수 있다면

<div id="poll"> 
    <div class="voted">         <-- dynamically created div 
     <div class="comment-block" style="display:block"> 
      <?php echo do_shortcode('[contact-form-7]'); ?> 
     </div> 
    </div> 
</div>            

, 나는 그것을 감사하겠습니다 . 나는 이걸로 몇 시간 동안 내 머리를 짚고있다.

편집 : https://github.com/lesterchan/wp-polls

Answer 1

$('button.Buttons').click(function() 
{ 
    $('#poll').empty().append('<div class="voted"></div>'); 
    $('.comment-block').show().appendTo('.voted'); 
    $(this).unbind('click'); 
}); 

당신은 할 수 있습니다 그래서 내가 정확히 필요한 코드를 제공 할 수없는 해요,하지만 여기에 플러그인에 대한 파일의 목록입니다 AJAX와 속도를 최대 아니다 또한 '.show()'를 변경하여 실제 스타일을 표시하도록 설정하십시오. 필요한 경우 차단하십시오.

Answer 2

내가 제대로 질문을 이해한다면,이 작업을해야합니다 :

$('.Buttons').on('click', function() { 
    setTimeout(function() { 
    var commentBlock = $('.comment-block'), 
     cloneComment = commentBlock.clone(); 
     commentBlock.remove(); 
    $('#poll').append(cloneComment); 
    cloneComment.wrap('<div class="voted">').show(); 
    }, 1000); 
}); 

첫째,이 '.Buttons'요소에 '클릭'결합한다. 그런 다음 '.comment-block'요소의 복제본을 만들어 원래 '.comment-block'을 .remove()하고 복제 된 요소를 .pend() 또는 .prepend()하여 '#poll'요소에 복사하십시오. 마지막으로 복제본을 <div class="voted">으로 .wrap()하고 .show()를 호출하여 복제본을 표시합니다.

Answer 3

당신은 아약스 호출에서 이벤트를 트리거해야합니다

버튼이 기능은 AJAX 호출을 발사 온 클릭. ajax success는 변경 대상 요소에서 이벤트를 발생시키고 해당 응답을 매개 변수로 전달합니다.

예 : HTML

<div id="foo">bar</div> 
<button onclick="ajaxCall();" /> 

자바 스크립트 당신은 더 "정밀 유도"(즉,이,에 맞게 조정하려는 경우 Ajax 코드를 표시해야 할거야

var ajaxCall = function() { 
    $.ajax({ 
    success: function(response) { 
     $("#foo").trigger("ajsuccess", response); 
    } 
    }); 
}; 
$("#foo").on({ 
    "ajsuccess" : function(e, response) { 
    $(this).append(response); 
    } 
});