Ajax后在另一个变量函数中触发点击函数

Question

我的代码在 window 加载时工作正常，我将它放在一个函数中以在 ajax 之后重置内容宽度。我的问题是使内容能够滑动的锚点在 Ajax 后停止工作。知道我做错了什么吗？

这是我的代码：

     function slideMyContent(){
         $(document).find('.selector').each( function(){
            var $slider = $(this),
            $sliderContainer = $slider.find(".slider-container"),
            $sliderList = $slider.find('.slider-list'),
            $sliderItem = $slider.find('.slider-item'),
            $sliderItemInner = $slider.find('.slider-item-inner'),
            $sliderItemInnerEmpty = $slider.find('.slider-item-inner:empty'),
            $sliderButton = $slider.find('.slider-button'),
            $prevButton = $(document).find('.slider__button--prev'),
            $nextButton = $(document).find('.slider__button--next'),
            setItemWidth = function(){
                // some codes to set content width which works fine even after Ajax
            },
            slide = function(){
                var $button = $(this),
                    dir = $button.data('dir'),
                    curPos = parseInt($sliderList.css('left')) || 0,
                    moveto = 0,
                    containerWidth = $sliderItemInner.length ? $sliderContainer.innerWidth() + 1 : $sliderContainer.innerWidth(),
                    listWidth = $sliderList.innerWidth(),
                    before = (curPos + containerWidth),
                    after = listWidth + (curPos - containerWidth);
                if(dir=='next'){
                    moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
                    $prevButton.toggle(moveto != 0);
                    $nextButton.toggle(after > containerWidth);
                } else {
                    moveto = (before >= 0) ? 0 : curPos + containerWidth;
                    $prevButton.toggle(moveto != 0);
                    $nextButton.show();
                }
                    $sliderList.animate({left: moveto});
            };
            $(window).resize(function(){
                setItemWidth();
                slide();
            });
            setItemWidth();
            $sliderButton.on('click', slide); // This is where I have a problem (Not woking after Ajax)
        });
    }

Answer 1

感谢大家。我最终从主函数中删除了 slide 函数，并从 stand-alone 单击函数中进行锚点单击，例如：

   $(document).on('click', '.slider-button', function(){
      slide();
   });

如果有人有更好的方法来完成我打算做的事情而无需额外的代码行，请随时分享。我希望有一天它会帮助某人。干杯！

Ajax后在另一个变量函数中触发点击函数

Trigger click function in another variable function after Ajax

ajax

jquery

onclick