Fancybox는 처음 렌더링 된 HTML에서는 작동하지만 ajax 호출 결과로 렌더링 된 HTML에서는 작동하지 않습니다.

Question

플러그인을 쓰고 있습니다. (필자는 많은 것을 썼습니다.) 팝업 상자에 PNG 이미지를 처음 표시하기 위해 Fancybox를 처음 사용하기로 결정했습니다. 플러그인은 처음에는 초기 페이지 렌더링의 일부인 html에서는 잘 작동하지만, 아약스 호출에서 반환하는 동일한 html은 팝업을 생성하지 않으며 오류를 발생시키지 않습니다.

내 질문은 : html이 ajax 호출의 결과로 div에 삽입되면 팝업에 Fancybox와 Thickbox를 사용할 수 있습니까? 그렇다면 무엇이 잘못 되었습니까? - 아약스에서 다시 처음이 작품을 렌더링하지만, HTML

$html = " 
<div class='skTable'> 
     <div class='skTableHeading'> 
      <div class='skTableHead skQtyColumn'>#</div> 
      <div class='skTableHead skNameColumn'>Name</div> 
      <div class='skTableHead skImgColumn'>Image</div> 
     </div> 
     <div class='skTableBody'>"; 
foreach ($itemList as $item) {     
    $html .= " 
      <div class='skTableRow'> 
       <div class='skTableCell skQtyColumn'>$item->quantity</div> 
       <div class='skTableCell skNameColumn'>$item->itemName</div> 
       <div class='skTableCell skImgColumn'> 
        <div style='display:none'> 
         <div id='$item->itemCode-$item->itemNumber' style='width:245px;height:342px;'> 
          <img width='245' height='342' src='$item->imageUrl'> 
         </div> 
        </div> 
        <a class='itemShow' href='#$item->itemCode-$card->itemNumber'>View</a> 
       </div> 
      </div>"; 
} 
$html .= " 
     </div> 
</div>"; 
$results['html'] = $html; 
$results['success'] = TRUE; 

정확한 동일한 코드가 초기 페이지를 렌더링하는 HTML에 사용되는 :

이 내가 아약스 호출에서 HTML을 생성하는 방법이다 전화하지 않습니다. 초기는 렌더링

jQuery(document).ready(function($) { 

    $('#ChoiceID').on('change', function() { 
     var valueSelect = $(this).val(); 
     var ajaxurl = plugin_vars.ajax_url; 
     var ajax_nonce = plugin_vars.ajax_nonce; 

     $.ajax(ajaxurl, { 
      type:  "POST", 
      dataType: 'json', 
      data:  { 
          action:  "getChoiceResult", 
          security: plugin_vars.ajax_nonce, 
          userChoice: valueSelect 
         }, 
      success: function (results) { 
          var returnedHTML = results.html; 
          if (results.success) { 
           $('#ChoiceResult').html(returnedHTML); 
          } else { 
           $('#ChoiceResult').html('<span>No results available: ' + valueSelect + '</span>'); 
          } 
         }, 
      error:  function (errorThrown) { 
          alert('error running'); 
          alert("Error thrown: " + errorThrown); 
         }    }); 
     });   
    }); 

는 아약스 전화를 개막하고 결과를 배치 할 위치를 제공하는이 관련 HTML을 포함

나는 문제는 별도의 파일에있는 내 jQuery를에 의심 :

<div class="skTableCell"> 
    <form action="" id="plugin_form"> 
    <div class="skTable"> 
     <div class="skTableRow"> 
     <div class="skTableCell"> 
      <label for="UserChoice" class="skLabel">Make a choice:</label> 
     </div> 
     <div class="skTableCell"> 
      <select name="UserChoice" id="ChoiceID" class="skSelect"> 
      <option value="NonChoice">--- Choose a deck! ---</option> 
      <option value='Choice1'>Choice 1</option> 
      <option value='Choice2'>Choice 2</option> 
      <option value='Choice3'>Choice 3</option> 
      </select> 
     </div> 
     </div> 
    </div> 
    </form> 
</div> 
<br/><br/> 
<!-- where the response will be displayed --> 
<div id="ChoiceResult"></div> 

워드 프레스의 Fancybox 설정은 Fancybox jQuery를에 추가 설정이 확인할 외부 호출이 있습니다

jQuery(".itemShow").fancybox({ 
    'scrolling'  : 'no', 
    'titleShow'  : false 
}); 

jQuery(".modal").fancybox({ // for modals pages 
     'autoSize' : true, 
     'type' : 'ajax' 
}); 

jQuery("#zoom").fancybox({ // for modal images 
     'autoScale' : true, 
     'transitionIn' : 'fade', 
     'transitionOut' : 'fade' 
}); 

을

내가 대기열에 포함하는 CSS는 단순히 형식 지정이며 관련이 없습니다.

내가 포함 할 수있는 모든 것, 그러나 더 많은 것을 요구하는 것을 망설이지 말라. 오류 로그는 눈에 띄지 않으며 브라우저 콘솔은 오류를보고하지 않습니다. 초기 렌더링의보기 링크를 클릭하면 Fancybox 팝업이 표시됩니다 (시도했을 때 thickbox처럼).하지만 axy 호출의 결과로 ChoiceResult div에 삽입 된 html은 Fancybox 또는 내장 thickbox.

누구든지 흘릴 수있는 불빛에 미리 감사드립니다.

Answer 1

해결되었습니다. 올바른 방향으로 나를 가리켜 주신 @Janis에게 감사드립니다.

jQuery 세그먼트가 작동하지 않는 이유는 모든 것이 작동하려면 3 개의 다른 장소에 배치해야했기 때문입니다. 이것은 선택된 WordPress 플러그인 때문일 수 있습니다. 내 질문에 플러스로 설명 된대로 플러그인에 있어야하며 문제가되는 것으로 의심되는 jQuery의 두 장소에 있어야합니다. 이 코드는 이제 다음과 같이 나타납니다.

jQuery(document).ready(function($) { 

    $(".itemShow").fancybox({ 
     'scrolling'  : 'no', 
     'titleShow'  : false 
    }); 

    $('#ChoiceID').on('change', function() { 
     var valueSelect = $(this).val(); 
     var ajaxurl = plugin_vars.ajax_url; 
     var ajax_nonce = plugin_vars.ajax_nonce; 

     $.ajax(ajaxurl, { 
      type:  "POST", 
      dataType: 'json', 
      data:  { 
          action:  "getChoiceResult", 
          security: plugin_vars.ajax_nonce, 
          userChoice: valueSelect 
         }, 
      success: function (results) { 
          var returnedHTML = results.html; 
          if (results.success) { 
           $('#ChoiceResult').html(returnedHTML); 
          } else { 
           $('#ChoiceResult').html('<span>No results available: ' + valueSelect + '</span>'); 
          } 
          $(".itemShow").fancybox({ 
           'scrolling'  : 'no', 
           'titleShow'  : false 
          }); 

         }, 
      error:  function (errorThrown) { 
          alert('error running'); 
          alert("Error thrown: " + errorThrown); 
         }    }); 
     });   
    }); 

성공 섹션과 준비가 완료된 후에 바로 새 jQuery가 표시됩니다.

즐기십시오! 그리고 다시 Janis에게 인내심과 도움을 주신 것에 감사드립니다 !!