버튼을 클릭하여 div에 img로드 - Wordpress

Question

Im는 WordPress 사이트를 사용하며 링크를 클릭 할 때 이미지 (추적 픽셀)를로드하려고합니다. 이 코드는 있지만로드하지 않는 것 같습니다. 내가 놓친 게 있니? 도움에 미리 감사드립니다.

HTML

<a class="button" target="_blank" title="" href="/rd/credit-check.php" id="ccBtn"><span class="fusion-button-text">GET YOUR FREE CREDIT SCORES NOW!</span></a> 
<div id="pixel"></div> 

JS

jQuery("#ccBtn").click(function(){ 
jQuery("#pixel").html("<img src='http://imageurl.com/img.png' alt='itworks' />"); 
}); 

Answer 1

그것은 타이밍 문제 일 수 있습니다. 브라우저는 이미지로드 시간보다 빠르게 링크를 가져와야합니다.

나는 다음에 jQuery를 변경하는 것 :

jQuery(document).ready(function($){ 
    $('#ccBtn').on('click', function(e){ 
     e.preventDefault(); //stop click 
     var $this = $(this); 
     $this.off('click'); //remove this function when click on link 
     $("#pixel").html("<img src='http://imageurl.com/img.png' alt='itworks' />"); //add image 
     setTimeout(function(){$this.trigger('click')}, 500); //click on this link again. 
    }); 
}); 

이것은 픽셀이 들어있는 상태에서 0.5 초 발사에서 링크를 중지합니다.

Answer 2

다른 회원들과 마찬가지로 이미지 로딩 시간에 문제가있는 경우 David DeSandro의 훌륭한 플러그인 (ImagesLoaded)을 언급하자.

사이트에 구현되면 언제든지 이미지를 완전히로드하는 컨테이너에 응답 한 다음 콜백 기능을 완료하도록 요청할 수 있습니다.

은 그럼 당신은

$(document).ready(function{ 
    $("#someDiv").imagesLoaded(function() { 
     $("#ccBtn").click(function(){ 
      $("#pixel").html("<img src='http://imageurl.com/img.png' alt='itworks' />"); 
     }); 
    }); 
}); 

이 당신이 그것을에 이벤트 리스너를 결합하기 전에 모든 이미지를로드 할 것입니다 .... 그래서 같이 @nicael

에 의해 여기에 주어진 대답을 할 수 있습니다.