Fancybox 适用于最初呈现的 HTML，但不适用于由于 ajax 调用而呈现的 HTML

Question

我正在写一个插件（我写了很多），并决定第一次尝试 Fancybox 在弹出窗口中显示 png 图像。该插件适用于最初作为初始页面渲染一部分的 html，但我从 ajax 调用返回的相同 html 不会导致弹出窗口并且不会引发错误。

我的问题是：当 html 作为 ajax 调用的结果被注入 div 时，是否仍然可以使用 Fancybox 和 Thickbox 弹出窗口？如果是这样，这里有什么问题？

这就是我在 ajax 调用中创建 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 使用完全相同的代码 - 并且初始渲染同样有效，但来自 ajax 调用的 html 无效。

我怀疑问题出在我的 jQuery 中，它位于一个单独的文件中：

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);
                        }               });
        });         
    });

初始渲染还包含启动 ajax 调用并提供放置结果的位置的相关 html：

<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>

Wordpress 中的 Fancybox 设置检查了 Extra Calls，这些设置添加到 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 只是格式化而不相关。

这就是我能想到的所有内容，但请不要犹豫，要求更多。错误日志无异常，浏览器控制台不报告任何错误。在初始渲染中单击 View 链接时，会显示 Fancybox 弹出窗口（当我尝试这样做时会显示一个厚框） - 但是由于 ajax 调用而注入到 ChoiceResult div 中的 html 不在 Fancybox 或内置厚盒。

提前感谢任何人都可以提供的任何启示。

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 的耐心和帮助！！