Javascript HTML Select由带有无限循环的jQuery设置样式

我已经使用JQuery设置了select项的样式，JQuery以无序列表的形式输出这些项。这是有效的。我使用了一些javascript在无序列表上创建无限滚动效果。无限滚动基本上重复整个列表，从而产生两组相同的列表项。但是，克隆的集合列表项不可单击，因此表单在单击克隆的列表项时不会呈现任何结果

链接到有问题的选择（尝试情感品质选择）——

链接到代码笔无限滚动-

这是我的PHP

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <div class="container d-flex justify-content-between">
        <div class="row" style="width: 100%">
    <?php
    if( $terms = get_terms( array('hide_empty' => false,'taxonomy' => 'emotional_quality', 'orderby' => 'name' ) ) ) : ?>
        <div id="emotional" class="col-md-4">
        <?php
            echo '<select class="form-submit" name="categoryfilter2"><option value="">Emotional Quality</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
            endforeach;
            echo '</select>'; ?>
        </div>
        <?php endif; 

        if( $terms = get_terms( array( 'hide_empty' => false,'taxonomy' => 'genre', 'orderby' => 'name' ) ) ) : ?>
            <div id="genre" class="col-md-4">

            <?php echo '<select class= "form-submit" name="categoryfilter"><option value="">Select genre...</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
            endforeach;
            echo '</select>'; ?>
        </div>
        <?php endif;

        if( $terms = get_terms( array( 'hide_empty' => false,'taxonomy' => 'cinematic_style', 'orderby' => 'name' ) ) ) : ?>
            <div id="cinematic" class="col-md-4">

            <?php echo '<select class="form-submit" name="categoryfilter3"><option value="">Cinematic Style</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
            endforeach;
            echo '</select>'; ?>
        </div>
        <?php endif;



    ?>


    <!-- <button>Apply filter</button> -->
    <input type="hidden" name="action" value="myfilter">
</div><!-- row -->
</div>
</form>

---

将ajax调用更改为下面建议的方式应该可以使单击对您起作用：

<script>
    jQuery(function($){
        jQuery('body').on('click', '.select-options li', function() {
            var filter = $('#filter');
            $.ajax({
                url:filter.attr('action'),
                data:filter.serialize(), // form data
                type:filter.attr('method'), // POST
                beforeSend:function(xhr){
                    filter.find('button').text('Processing...'); // changing the button label
                },
                success:function(data){
                    filter.find('button').text('Apply filter'); // changing the button label back
                    $('#response').html(data); // insert data
                }
            });
            return false;
        });
    });
</script>


jQuery（函数（$）{
jQuery（'body'）。在（'click'，'上。选择选项li'，函数（）{
变量过滤器=$（“#过滤器”）；
$.ajax({
url:filter.attr（'action'），
数据：filter.serialize（），//表单数据
类型：filter.attr（'method'），//POST
发送前：函数（xhr）{
filter.find（'button'）.text（'Processing…'）；//更改按钮标签
},
成功：功能（数据）{
filter.find（'button'）.text（'Apply filter'）；//重新更改按钮标签
$（'#response'）.html（数据）；//插入数据
}
});
返回false；
});
});

之所以应该这样做，是因为现在click事件绑定在类上，而不管该类的元素是在DOM加载中加载的还是在DOM完全加载后加载的

直接调用
。单击
，或以
jQuery（'.select options li'）的格式。on（'click'，function（）{}）仅将事件绑定到DOM准备就绪之前加载的元素
 我在这里看不到你的ajax调用，你也能分享一下（或者用评论指出）吗？@FahamShaikh-我在原始帖子中添加了它。提前谢谢你的帮助！谢谢你的建议。现在似乎可以选择所有项目，但AJAX不会触发表单。我添加了你的代码，你可以看到这里发生了什么：实际上，看起来克隆的项目毕竟无法被选择。如果有任何见解，我将不胜感激。谢谢按照同样的逻辑，javascript中用于设置select样式的这段代码似乎与此有关var$list=$（'
'，{'class'：'select options'}）$list.wrap（“”）；对于（var i=0；i'，{text:$this.children（'option'）.eq（i）.text（），rel:$this.children（'option'）.eq（i）.val（））.appendTo（$list）；}var$listItems=$list.children（'li'）``将相同的主体参数添加到脚本中以设置选择的样式，它现在可以工作了。谢谢
<script>
    jQuery(function($){

$('#emotional .wrap-container').attr('id', 'wrap-scroll-1');
$('#emotional .wrap-container ul').attr('id', 'ul-scroll-1');

$('#genre .wrap-container').attr('id', 'wrap-scroll-2');
$('#genre .wrap-container ul').attr('id', 'ul-scroll-2');


$('#cinematic .wrap-container').attr('id', 'wrap-scroll-3');
$('#cinematic .wrap-container ul').attr('id', 'ul-scroll-3');


});
</script>

<!-- Infiinite scroll for emotional quality-->
<script>
var scrollW = document.getElementById("wrap-scroll-1");
var scrollUl = document.getElementById("ul-scroll-1");
var itemsScrolled,
  itemsMax,
  cloned = false;

var listOpts = {
  itemCount: null,
  itemHeight: null,
  items: []
};

function scrollWrap() {
    var scrollW = document.getElementById("wrap-scroll-1");
var scrollUl = document.getElementById("ul-scroll-1");
  itemsScrolled = Math.ceil(
    (this.scrollTop + listOpts.itemHeight / 2) / listOpts.itemHeight
  );

  if (this.scrollTop < 1) {
    itemsScrolled = 0;
  }

  listOpts.items.forEach(function(ele) {
    ele.classList.remove("active");
  });

  if (itemsScrolled < listOpts.items.length) {
    listOpts.items[itemsScrolled].classList.add("active");
  }

  if (itemsScrolled > listOpts.items.length - 3) {
    var node;
    for (_x = 0; _x <= itemsMax - 1; _x++) {
      node = listOpts.items[_x];

      if (!cloned) {
        node = listOpts.items[_x].cloneNode(true);
      }

      scrollUl.appendChild(node);
    }

    initItems(cloned);
    cloned = true;
    itemsScrolled = 0;
  }
}

function initItems(scrollSmooth) {
    var scrollUl = document.getElementById("ul-scroll-1");
    var scrollW = document.getElementById("wrap-scroll-1");


  listOpts.items = [].slice.call(scrollUl.querySelectorAll("li"));
  listOpts.itemHeight = listOpts.items[0].clientHeight;
  listOpts.itemCount = listOpts.items.length;

  if (!itemsMax) {
    itemsMax = listOpts.itemCount;
  }

  if (scrollSmooth) {
        var scrollW = document.getElementById("wrap-scroll-1");

    var seamLessScrollPoint = (itemsMax - 3) * listOpts.itemHeight;
    scrollW.scrollTop = seamLessScrollPoint;
  }
}

document.addEventListener("DOMContentLoaded", function(event) {
        var scrollW = document.getElementById("wrap-scroll-1");

  initItems();
  scrollW.onscroll = scrollWrap;
});


</script>


<script>
jQuery(function($){
    jQuery('.select-options li').click(function() {
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('button').text('Processing...'); // changing the button label
            },
            success:function(data){
                filter.find('button').text('Apply filter'); // changing the button label back
                $('#response').html(data); // insert data
            }
        });
        return false;
    });
});
</script>

<script>
    jQuery(function($){
        jQuery('body').on('click', '.select-options li', function() {
            var filter = $('#filter');
            $.ajax({
                url:filter.attr('action'),
                data:filter.serialize(), // form data
                type:filter.attr('method'), // POST
                beforeSend:function(xhr){
                    filter.find('button').text('Processing...'); // changing the button label
                },
                success:function(data){
                    filter.find('button').text('Apply filter'); // changing the button label back
                    $('#response').html(data); // insert data
                }
            });
            return false;
        });
    });
</script>