jQuery .on() 没有触发所需的功能

Question

我写了一些代码来过滤集合内部。但是当输入点击时它不会触发（用console.log检查）

这是我的代码：

{% for collection in collections %}
  $('#collection-{{ collection.title | replace: " ", "" }}').on('click', function(event){
    showCollection('{{ collection.title | replace: " ", "" }}');
  });
{% endfor %}

这是 HTML:

{% for collection in collections %}
   <li>
      <input type="radio" name="categoryCollection" id="collection-{{ collection.title | replace: " ", "" }}" value="{{ collection.title }}">
      <label for="collection-{{ collection.title | replace: " ", "" }}">{{ collection.title }}</label>
   </li>
{% endfor %}

我错过了什么？谢谢！

编辑：我使用的逻辑是流动的，因为我正在创建一个 Shopify 主题。此外，在控制台中一切正常。我将在此处添加呈现的 HTML:

<ul>
          
              
                <li>
                  <input type="radio" name="categoryCollection" id="collection-Jackets" value="Jackets">
                  <label for="collection-Jackets">Jackets</label>
                </li>
                <li>
                  <input type="radio" name="categoryCollection" id="collection-LuxuryTracksuits" value="Luxury Tracksuits">
                  <label for="collection-LuxuryTracksuits">Luxury Tracksuits</label>
                </li>
                <li>
                  <input type="radio" name="categoryCollection" id="collection-Masks" value="Masks">
                  <label for="collection-Masks">Masks</label>
                </li>
                <li>
                  <input type="radio" name="categoryCollection" id="collection-T-Shirts" value="T-Shirts">
                  <label for="collection-T-Shirts">T-Shirts</label>
                </li>
                <li>
                  <input type="radio" name="categoryCollection" id="collection-Trousers" value="Trousers">
                  <label for="collection-Trousers">Trousers</label>
                </li>
              
            </ul>

EDIT2：我创建了一个有效的 fiddle，它只有一个问题：它有效。 Here you can see it

Answer 1

这可以变得更加通用，而无需循环为每个无线电 ID 创建事件侦听器。

请注意添加到每个内容元素的 class，以便使隐藏它们也通用

只需从发生事件的无线电中获取值即可过滤出您需要显示的内容

$('.filter :radio[name="collection"]').change(function(){
    const content_id = 'collection_' + this.value.toLowerCase();
    $('.collection_content').hide().filter('#' + content_id).show();
});

.collection_content{display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter">
  <ul>
    <li>
      <input type="radio" id="Jackets" value="Jackets" name="collection">
      <label for="jackets" >Jackets</label>
    </li>
    <li>
      <input type="radio" id="Shirts" value="Shirts" name="collection">
      <label for="Shirts">shirts</label>
    </li>
    <li>
      <input type="radio" id="Masks" value="Masks" name="collection">
      <label for="Masks">Masks</label>
    </li>
  </ul>
</div>

<div class="collection-wrap">
  <div id="collection_jackets" class="collection_content">JacketsJacketsJackets</div>
  <div id="collection_shirts" class="collection_content">ShirtsShirtsShirts</div>
  <div id="collection_masks" class="collection_content">MaksMaksMaks</div>
</div>

jQuery .on() 没有触发所需的功能

jQuery .on() not triggering the desired function

javascript

jquery

liquid