Javascript:在产品登陆页面上快速查看时未触发脚本

Question

这是在在线商店的背景下，我的问题并不完全基于代码，它更多的是基于理论/概念。我会尽力尽可能详细，但如果有任何模糊之处，我很乐意进一步说明。

我有两个例子。第一个是在产品页面上，其中有一个主图片 View ，其下方的缩略图显示产品的不同 View 。当您单击缩略图时，它会将您在缩略图中单击的图片与主视图中的图片交换。

第二个示例是在产品登陆页面上，其中小 View 图片有一个“快速查看”按钮，该按钮会弹出一个“快速 View ”，显示产品的简要详细信息、主图片 View 以及显示下方的缩略图不同的看法。当您单击缩略图时，应该会发生与上述相同的操作。它应该将主视图图片与您单击的缩略图进行交换，但事实并非如此。

运行它的 JavaScript 功能齐全。产品页面和登陆页面都使用同一个，并且它适用于产品页面。缩略图交换了，一切正常。但在登陆页面上，脚本没有触发。

它不会在 Chrome 调试器中的快速查看缩略图上显示事件监听器，而会在产品页面的缩略图上显示事件。我相信我可能知道出了什么问题。

脚本已成功绑定(bind)到产品页面上的缩略图，因为在产品页面上，缩略图显示在页面加载时。他们就在那里。登陆页面上的快速查看缩略图在页面加载时没有缩略图，它们仅在您单击快速查看按钮时“存在”。我将在下面添加一小段代码，显示相关元素的基本结构。

解决这个问题的最佳方法是什么？我需要将事件监听器绑定(bind)到快速 View 中的缩略图。

<script type="text/javascript">
//<![CDATA[
    abcd.picturezoom= Class.create({

        initialize: function () {
            ...
        },

        swap: function (event, elem) {
            ...
        },

        open: function (event) {
            ...
        },

        opensub: function (event) {
            ...
        },

        bindQuickViewPopup: function (event) {
            ...
        },

        switchModalImage: function (event) {

        }

    });

    document.observe("dom loaded", function () {
        picturezoom
    });

    <?php if($isQuickview): ?>
        ...
        });

    });
    <?php endif; ?>
    //]]>

快速查看和产品页面 HTML:

        <?php foreach ($this->images() as $_image): ?>

        <a imagenum="<?php ... ?>"

        data-main-image="<?php ... img?>"

        href="<?php ... imgfile ?>"

        class="<?php ... class name ?>"

        rel=' ... '

        id="gallery-thumbnail-quickview">

        <img src="<?php ... img?>"

        width="..." height="..." alt="<?php ... ?>" /></a>

        <?php endforeach; ?>

我应该如何解决这个问题？朝正确方向迈出的一些好的步骤是什么？编码部分并不是真正的问题，我很难找到从哪里开始。

Answer 1

我可以想到两种解决方案。

1. 不要立即执行缩略图初始化逻辑，而是将其移至在完整产品页面加载和打开 QuickView 层时调用的函数中。

2. 使用执行脚本时确实存在的链中较高位置的委托(delegate)事件处理程序。

使用 jQuery 委托(delegate)很快:

$(document).on('click.thumbnail', 'a.thumbnail_link', function(e){
    ...
});

您也可以用纯 JavaScript 构建委托(delegate)事件处理:DOM Event Delegation without jQuery

如果初始化逻辑需要特定于产品的信息，并且您可以从单个页面打开多个 QuickView 层(通常如此)，则第一个解决方案可能更可取。