Question

为什么我的JQuery只能在我的无限卷轴的第一页上工作？我正在使用.on（）方法...这不是应该用.on（）发生的吗？

这是我在custom.js中的JQuery：

$(document).ready(function(){
  $(document).on('click', '.article_description', function() {  
     $('.article_description').toggleClass("article_description article_description_full");
  }); 
});

我的HTML：

<div class="article_well_main" >
  <div class="row">
    <div class="photo_well col-lg-5 col-md-5 col-sm-12"> 
        <img src="<%=asset_path "#{article.image}">
    </div>

  <div class="col-lg-7 col-md-7 col-sm-12" >
    <h4 class="article_title"><%= link_to article.title, "#{article.location}", :target => "_blank"%></h4> 

    <p class="article_description"><%= article.description.html_safe%></p> 
    <div class="row">
       <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
         <p class="article_location" style="font-size:10px"><%= article.date_published %>  &nbsp|&nbsp <%= link_to article.source, "http://www.#{article.source}", :target => "_blank"%> </p>
       </div>

       <div class ="article-notes col-lg-4 col-md-4 col-sm-4 col-xs-4">
         <%=article.notes%>
       </div>
     </div>
    </div>
  </div>
</div>

Answer 1

以下是一个有效的示例，请运行下面的代码段，

＆＃13;

$(document).on('click', '.article_description', function() {  
  $(this).toggleClass("article_description_full");
});
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   console.log(st);
   if (st > lastScrollTop){
     // downscroll code
     if ((Math.round(st/100)*100) % 800 == 0) {
	 $("#wrapper").addClass("spinner");
	 // insert a cloned article_well_main after 2 seconds
	 setTimeout(function(){
	   var that = $(".article_well_main:first").clone(false);
           that.insertAfter(".article_well_main:last").find(".article_description")
           .removeClass("article_description_full");
	   that.hide().fadeIn();
	   $("#wrapper").removeClass("spinner");
	 }, 2000);	
     }
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

＆＃13;

.article_description {
	border:1px solid red;
	background-color: #DDD;
	cursor: pointer;
}
.article_description.article_description_full {
	min-height: 100px;
}
.spinner {
	background: url("https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif") no-repeat bottom center;
}
.container-fluid {
	min-height: 800px;
	padding-bottom: 800px;
}
@media only screen and (min-width: 768px) {
    .container-fluid {
    	min-height: 1200px;
    	padding-bottom: 1200px;
    }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="wrapper">
  <div class="article_well_main well" >
    <div class="row">
      <div class="photo_well col-lg-5 col-md-3 col-sm-3 col-xs-12"> 
        <img class="img-responsive" src="https://www.gravatar.com/avatar/d5c5ca719e82ca5a2afd0ff1702c221c?s=328&d=identicon&r=PG">
      </div>

      <div class="col-lg-7 col-md-9 col-sm-9 col-xs-12" >
        <h4 class="article_title"><%= link_to article.title, "#{article.location}", :target => "_blank"%></h4> 

        <p class="article_description"><%= article.description.html_safe%></p> 
        <div class="row">
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <p class="article_location" style="font-size:10px"><%= article.date_published %>  &nbsp|&nbsp <%= link_to article.source %> </p>
          </div>
          <div class ="article-notes col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <%=article.notes%>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

注意：我正在使用计时器来模仿无限滚动

Answer 2

请使用绑定方法

，而不是使用on方法

尝试以下代码

＆＃13;

$(document).bind('click', '.article_description', function() {
     $('.article_description').toggleClass("article_description article_description_full");
  });

＆＃13;

以上对我来说非常合作

如果您有任何疑问，请告诉我

由于

在Ajax调用之后，JQuery将无法工作

2 个答案: