Question

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

我的问题是：当atml作为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);
                        }               });
        });         
    });

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

<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设置已使用这些设置选中额外调用以添加到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或者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以及准备好之后的新jQuery。

享受！再次感谢@Janis的耐心和帮助!!

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

1 个答案: