从 Ajax 更新内容后 jQuery 无法正常工作

Question

我有一个内容滑块，在 ajax 加载内容的第一页上工作正常，但是当我从 ajax 加载内容转到下一页，然后单击

#readyslider

更新新加载的未来内容的滑动动画，然后滑块就会出现故障。而且它不能正常工作，时间和褪色所有事件都会遇到麻烦。为什么？

就像我进入下一页一样，滑块问题变得更糟。

我用谷歌搜索并尝试了很多其他技术，但没有像 jQuery noConflict 那样工作https://api.jquery.com/jquery.noconflict/

我将所有

$

更改为

j

和

jQuery  noConflict

，如下所示：

但是没有成功。

编辑：我已经添加了滑块的整个html和css代码，尝试多次单击

ReadySlider

按钮，你就会看到问题。

我的做法：

var j = jQuery.noConflict();
    j(document).ready(function () {

j(document).on("click", '#readyslider', function(event) { 
    setTimeout(function () { 

var interval;
var interval = false;
j("#subttlslider > div:gt(0)").hide();

function updateDiv() {
  j('#subttlslider > div:first')
    .fadeOut(600)
    .next()
    .fadeIn(400)
    .end()
    .appendTo('#subttlslider');
}

j("#nextclick").click(function(){

    $('#subttlslider > div:first-child')
    .fadeOut(600)
    .next()
    .fadeIn(400)
    .end()
    .appendTo('#subttlslider');
});

j("#prevclick").click(function(){
    $('#subttlslider > div:first-child')
    .fadeOut(0)
     $('#subttlslider > div:last-child')
    .prependTo('#subttlslider') 
    .fadeOut();
    $('#subttlslider > div:first-child').fadeIn();
});


j(".play").click(function() {
  if(!interval){
    interval = setInterval(updateDiv, 5000);
  }
  

});

我的整个滑块默认代码是：

$(document).on("click", '#readyslider', function(event) { 

    setTimeout(function () { 

var interval;
var interval = false;
$("#subttlslider > div:gt(0)").hide();

function updateDiv() {
  $('#subttlslider > div:first')
    .fadeOut(600)
    .next()
    .fadeIn(400)
    .end()
    .appendTo('#subttlslider');
}

$("#nextclick").click(function(){

    $('#subttlslider > div:first-child')
    .fadeOut(600)
    .next()
    .fadeIn(400)
    .end()
    .appendTo('#subttlslider');
});

$("#prevclick").click(function(){
    $('#subttlslider > div:first-child')
    .fadeOut(0)
     $('#subttlslider > div:last-child')
    .prependTo('#subttlslider') 
    .fadeOut();
    $('#subttlslider > div:first-child').fadeIn();
});


$(".play").click(function() {
  if(!interval){
    interval = setInterval(updateDiv, 5000);
  }
  

});

$(".pause").click(function() {
  clearInterval(interval);
  interval = false;
});

    }, 10);

});

#subttlslider>div {
  position: absolute;

}

#subttlslider {
    font-family: Four C Maya !important;
    text-shadow: none !important;
    background: linear-gradient(
90deg, rgba(162,162,162,1) 0%, rgba(252,252,255,1) 21%, rgba(255,255,255,1) 64%, rgba(162,162,162,1) 100%);
    color: black !important;
    box-shadow: rgb(0 0 0) 0px 1px 10px 1px inset !important;
    
    width: 552px !important;
    height: 283px !important;
        text-align: center !important;
    float: left !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px;
    border: 6px solid yellow;
    box-shadow: inset 0px 1px 17px 3px #000;
    padding: 10px;
    font-size:3em;
    overflow: hidden !important;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    position: relative;
    overflow: hidden;
   
  }
  
#subttlslidermaindiv {
position: absolute;
    width: 552px !important;
    height: 283px !important;
}





/** slideIn Left Right out **/

.slideInLeft {
    animation: slideInLeft 500ms both
}
@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


------
<button id="readyslider">ReadySlider</button>
<button class="play">play ⏯︎</button>
<button class="pause">⏸︎</button>
<button id="prevclick">⏪ Prev </button>
<button id="nextclick">Next ⏩</button>
-------




<div id="subttlslidermaindiv">
<div id="subttlslider" class="detailcontainer">
<div class='slideInLeft'>1) There is a lot of stress around us whole day which creates lot of hindrance in our mind.

</div>
<div class='slideInLeft'>2) The stress can arise at office, at our home, in some relations or in anything else.

 </div>
<div class='slideInLeft'>3) People while handling these kinds of stress doesn’t get the chance to see the beauty of life.

</div>
<div class='slideInLeft'>4) We forget that there is something more in our life which is valuable and beautiful.

</div>
<div class='slideInLeft'>5) God has given us plenty of good things like the beauty of nature in our life.

</div>
</div>
</div>

我认为问题是通过在我的ajax内容更新时单击

#readyslider 

按钮一次又一次地注入滑块代码而产生的...

但我真的不知道另一种解决方案是什么，那就是每次转到ajax下一页内容后都运行滑块而不出现任何故障。

我可以寻求帮助吗？...！提前一个可爱的拥抱:)

Answer 1

你不能让它只被激活一次吗？

var clicked = false;       // New
$(document).on("click", '#readyslider', function (event) {
    if (!clicked) {        // New
        clicked = true;    // New
        setTimeout(function () {
            // ...Same...
        }, 10);
    }
});