Question

当前我有这样的html：

.bashrc

我的jquery代码是这样的：

<div class="selector-wrapper">
    <label for="product-select-1372104458328-option-0">Style</label><select class="single-option-selector" data-option="option1" id="product-select-1372104458328-option-0">
        <option value="Adjustable">
            Adjustable
        </option>
        <option value="Flex Fit">
            Flex Fit
        </option>
        <option value="Trucker Hat">
            Trucker Hat
        </option>
    </select>
</div>

预期的结果是，当.single-option-selector中的选项更改时，会有console.log，但是我什么也没得到。没有错误或任何东西。有什么想法我做错了吗？

Answer 1

正如您提到的那样，标记是由Shopify生成的，很可能您选择的<select>元素实际上在运行时不可用（即，尚未将其注入DOM）。在这种情况下，当jQuery找不到绑定事件处理程序的元素时，它会静默失败。您可以通过将此行插入以下行来进行简单检查：

console.log($('.single-option-selector').length);

我的怀疑得到证实，如果它返回0，这意味着在运行时脚本无法在DOM中找到相关元素。解决此问题的方法是使用事件冒泡：基本上，您是在运行时将事件处理程序附加到预先存在的元素，然后仅过滤事件，以便仅捕获由您的标识的元素发出的事件选择器，即：

$(document).on('change', '.single-option-selector', function () {
    // Your logic here
});

但是，这种方法有一个缺点：侦听顶级文档中的事件会产生大量开销。如果您知道有一个元素在运行时始终可用，那么让我们说一下给定的DOM结构：

<body>
    <!-- This element is always present at runtime -->
    <section id="content">
        <!-- Contains dynamically injected HTML -->
    </section>
</body>

然后，您可以更新选择器，以监听起泡到#content而不是更深的事件：

$('#content').on('change', '.single-option-selector', function () {
    // Your logic here
});

更改时的jQuery无法正常工作

1 个答案: