代码之家 › 专栏 › 技术社区 › FabricioG

关于变更的jquery不起作用

shopify jquery

FabricioG · 技术社区 · 6 年前

目前我有这样的HTML:

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

我的jquery代码是:

$(function() {
    $('.single-option-selector').on('change', function() {
    console.log( 'blahblah' );
    });
});

当选项在.single选项选择器中更改时,预期的结果将是console.log,但情况并非如此,我什么也得不到。没有任何错误。知道我做错了什么吗?

1 回复 | 直到 6 年前

Terry 6 年前

正如您所提到的,标记是由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
});

推荐文章

krichey15 · 如何正确使用map函数获取数组中元素的索引?

2 年前

Birdie Golden · 使用remove()确保元素在DOM中不可见或通过查看源代码

2 年前

vidit · 如何在购物车页面上基于商品属性显示商品

2 年前

Sachin Sarola · 想用一些html标记替换{variable | filter}或扭曲这个值吗

6 年前

Gina · 如何访问/编辑Shopify上的HTML文件?

6 年前

Alfredo Pantoja · Shopify应用程序-如何使用ruby on rails上的应用程序代理包含资产

6 年前

Fruckubus Crunt · 使用JS Buy SDK将Shopify商品添加到购物车时出现问题

6 年前

Dustin Lee · 在循环液体中添加变量

6 年前

Nidhi · 在“settings\u schema”中添加“blocks”。shopify主题中的json

6 年前

Ben · 如何使用Shopify的API获取Shopify商店订单

6 年前