출력에 "echo"를 사용하면 jquery effects가 PHP에서 보이지 않습니다.

Question

메신저에는 fancybox를 사용하는 작은 이미지 갤러리가 있습니다. 따라서 각 이미지에는 호버 및 팝업 효과가 있습니다. 아래 코드는 내 코드

<div class="one-third column hover"> 
       <a href="large/28crowview_ld.jpg" class="image-box"> 
       <div class="photo"> 
       <span class="text"><span class="anchor"></span></span> 
       </div>   
       <img src="large/28crowview_ld.jpg" height="170px" width="260px"/>  
     </a>       
    </div> 

위의 코드는 완벽하게 작동합니다.

하지만 에코

echo '<div class="one-third column hover"> 
        <a href="large/28crowview_ld.jpg" class="image-box"> 
        <div class="photo"> 
        <span class="text"><span class="anchor"></span></span> 
        </div>   
        <img src="large/28crowview_ld.jpg" height="170px" width="260px"/>  
      </a>       
     </div>'; 

를 사용하여 상기 코드를 반환하지만 에코 태그를 사용할 때, 이미지가 표시되지만 호버 효과 이외이 가시되는 AJAX 제어기를 사용하여 IM. 그것은 매우 이상했다. 나는 또한 내 사교 모임에서 같은 문제를 발견했다.

HTML 뷰에서 사용할 때 완벽하게 작동합니다. 내가 에코 때, 나는 소스 코드를 볼 수 있지만 아이콘이 제대로 더 JS 충돌 모든 이미지가 배치됩니다

echo '<div class="supersocialshare" data-networks="facebook,google,twitter,linkedin,pinterest" data-url="'.$share.'" data-orientation="line"></div>'; 

표시되지 않습니다.

다음은 내부

$page_number = filter_var($this->input->post('page'), FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); 

     //throw HTTP error if page number is not valid 
     if(!is_numeric($page_number)){ 
      header('HTTP/1.1 500 Invalid page number!'); 
      exit(); 
     } 

     $item_per_page = 5; 

     //get current starting point of records 
     $position = ($page_number * $item_per_page); 

     $cottages = $this->properties->getstuff($sub_location,$position, $item_per_page); 

     foreach ($props as $cots): 

       echo'<div class="container section" id="'.$cots["id"].'"> 
         <div class="one-third column hover"> 
         <a href="'.$cots["image_url"].'" class="image-box"> 
           <div class="photo"> 
            <span class="text"><span class="anchor"></span></span> 
           </div>   
           <img src="'.$cots["image_url"].'" height="170px" width="260px"/> 

           </a>       

         </div>'; 
endforeach; 

임 건물 CodeIgniter를, PHP와 jQuery를 사용하여이 프로젝트를 fetch_pages

<script type="text/javascript"> 
$(document).ready(function() { 

    var track_click = 0; //track user click on "load more" button, righ now it is 0 click 

    var total_pages = <?php echo $total_pages; ?>; 
    $('#results').load("<?php echo base_url() ?>fetch_pages", {'page':track_click}, function() {track_click++;}); //initial data to load 

    $(".load_more").click(function (e) { //user clicks on button 

     $(this).hide(); //hide load more button on click 
     $('.animation_image').show(); //show loading image 

     if(track_click <= total_pages) //make sure user clicks are still less than total pages 
     { 
      //post page number and load returned data into result element 
      $.post('<?php echo base_url() ?>fetch_pages',{'page': track_click}, function(data) { 

       $(".load_more").show(); //bring back load more button 

       $("#results").append(data); //append data received from server 

       //scroll page to button element 
       $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500); 

       //hide loading image 
       $('.animation_image').hide(); //hide loading image once data is received 

       track_click++; //user click increment on load button 

      }).fail(function(xhr, ajaxOptions, thrownError) { 
       alert(thrownError); //alert any HTTP error 
       $(".load_more").show(); //bring back load more button 
       $('.animation_image').hide(); //hide loading image once data is received 
      }); 


      if(track_click >= total_pages-1) 
      { 
       //reached end of the page yet? disable load button 
       $(".load_more").attr("disabled", "disabled"); 
      } 
     } 

     }); 
}); 
</script> 

를 사용하여 자바 스크립트 메신저입니다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

자바 스크립트 코드를 입력 해주세요. 제 1 센트를 던지고 싶습니다. live 기능이 지원되지 않습니다주의,

jQuery('#div').click(...); // this will work fine if you place your code in page not posted back from ajax request or dynamically created 
jQuery('#div').live('click',...); // this will work even if the element was created dynamically or from ajax request. 

jQuery "live" link

jQuery "On" link

---

한 가지 더 : 당신이 hover 방법 대신 live hover 또는 on hover 기능 바로 다음과 같은 를 사용하는 내기 jQuery에서 제거되었습니다. 1.9

Answer 2

웹 응용 프로그램의 전반적인 구조, 클라이언트의 브라우저에서 일어나는 일, 서버에서 일어나는 일, PHP의 동작 등을 이해하는 데 심각한 문제가있는 것 같습니다. 그걸 읽어야합니다.

$(".hover").on("hover",function() { 
    // BLAH 
}); 

이 경우는, 클래스 가져가 어떤 요소가로드 된 다음 인 경우 :

그러나, 문제는 가장 가능성이 호버 및 팝업 효과는이에 상응하는 무언가에 의해 수행되고 있다는 사실과 관련이 이벤트 처리기가 첨부 된 후 (즉, ajax를 통해) 해당 이벤트 처리기가 연결되지 않은 경우 간단한 해결 방법은 이벤트 처리기를 컨테이너에 연결하고 다음과 같은 위임 된 이벤트 처리기를 사용하는 것입니다.

$(document).on("hover",".hover",function() { 
    // This handler is attached to the document but applies to any .hover elements inside it 
}); 

또 다른 문제는 요소가 ajax를 통해로드 된 후 "fancybox"기능을 요소에 첨부하는 모든 함수를 실행하는 것입니다.anpsmn 의견에 따르면 내가 그것을 완벽하게 작동

$(window).load(function() { 

내 전체 fancybox 플러그인을 다시 초기화해야했다

$.get(url, function (data) { 
    var elem = $(data); 
    $("#container").append(elem); 
    elem.fancybox(); 
}); 

Answer 3

: 그것은 바로 일부 참조 코드없이 얻을하지만 난 뭔가 같은 것 생각하기 어렵다.