javascript - HTML Select 由 jQuery 设计，带有无限循环

Question

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

链接到相关选择(尝试情感质量选择)- http://dev.chrislamdesign.com/shortwave/sample-page/

链接到 codepen 无限滚动 - https://codepen.io/doctorlam/pen/oKgRvO

这是我的 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>

这是用于设置选择样式的 Javascript

<script>
    jQuery(document).ready(function($){

    $('select').each(function(){
    var $this = $(this), numberOfOptions = $(this).children('option').length;

    $this.addClass('select-hidden'); 
    $this.wrap('<div class="select"></div>');
    $this.after('<div class="select-styled"></div>');

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);
    $list.wrap('<div class="scroll-container"><div class="wrap-container"></div></div>');
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems = $list.children('li');

    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').not(this).each(function(){
            $(this).removeClass('active').next('.scroll-container').hide();
        });
        $(this).toggleClass('active').next('.scroll-container').toggle();
    });

    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $('.scroll-container').hide();
        //console.log($this.val());
    });

    $(document).click(function() {
        $styledSelect.removeClass('active');
        $('.scroll-container').hide();
    });

});
    });
</script>

这是无限滚动的 Javascript

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

AJAX 调用

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

原始列表项触发表单并返回正确的结果。克隆的列表项则不然。我认为这与相同的 rel 值有关，但我不确定。

Answer 1

将您的 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>

这应该起作用的原因是因为现在单击事件绑定(bind)在类上，无论具有该类的元素是在 DOM 加载 中加载还是在 DOM 完全加载之后加载。

直接调用.click或格式jQuery('.select-options li').on('click', function(){});仅将事件绑定(bind)到 DOM 准备好之前加载的元素。