听多个元素滚动事件,代码无效。 jquery的

时间:2017-03-01 08:33:08

标签: javascript jquery html

我可以让一个元素起作用,但是让第二个元素工作的第二个元素不会触发。谁能明白为什么?我最近才一直在使用jquery,所以我不确定我在这里做错了什么。控制台中没有js错误。提前谢谢。

$(document).ready(function() {
  if ($('.pagination').length) {
    $('#id1, #id4').scroll(function() {
      var url1 = $('#currentuserfeed .pagination .next_page').attr('href');
      var url2 = $('.currentusershow .pagination .next_page').attr('href');
      if (url1 && $('#id1').scrollTop () >= $('#id1')[0].scrollHeight - $('#id1').height ()) {
        $('.pagination').text("Please Wait...");
        return $.getScript('url1');
      } else if (url2 && $('#id4').scrollTop () >= $('#id4')[0].scrollHeight - $('#id4').height ()) {
        $('.pagination').text("Please Wait...");
        return $.getScript(url2);
      }
    });
    return $('#id1, #id4').scroll();
  }
});

从DOM添加HTML

<div class="dynamicdisplaypanel">

   <div id="id1" style="display: none;"><section class="micropost_form">
     <form class="new_micropost" id="new_micropost" enctype="multipart/form-data" action="/microposts" accept-charset="UTF-8" method="post">
<input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="lXeeEtJZjk16hfs3fK3P7Qna71Qdlc8bWfRd9PP6XZFpcdOELQEQcQZSMNKDT8VJI5aGal97XgGZB3nABYIOhA==" type="hidden">

  <div class="field">
    <textarea placeholder="Compose new micropost..." name="micropost[content]" id="micropost_content"></textarea>
  </div>
  <input name="commit" value="Post" class="btn btn-primary btn-md" data-disable-with="Post" type="submit">
  <span class="picture">
    <input accept="image/jpeg,image/gif,image/png" name="micropost[picture]" id="micropost_picture" type="file">
  </span>
</form>
<script type="text/javascript">
  $('#micropost_picture').bind('change', function() {
    var size_in_megabytes = this.files[0].size/1024/1024;
    if (size_in_megabytes > 5) {
      alert('Maximum file size is 5MB. Please choose a smaller file.');
    }
  });
</script>
       </section><div id="currentuserfeed">
  <ol class="currentuserfeed">
    <li id="micropost-300">
  <a href="/users/6"><img alt="Mr. Dulce Brown" class="gravatar" src="https://secure.gravatar.com/avatar/3cd98f56e3a0822a762c9a4b85fd5685?s=50"></a>
  <span class="user"><a href="/users/6">Mr. Dulce Brown</a></span>
  <span class="content">
  Aut et est culpa numquam.

  </span>
  <span class="timestamp">
    Posted 3 months ago.
  </span>
.
.
.
.



  </ol>
  <div class="pagination"><span class="previous_page disabled">← Previous</span> <em class="current">1</em> 
<a rel="next" href="/?page=2">2</a> 
<a href="/?page=3">3</a> 
<a href="/?page=4">4</a> 
<a href="/?page=5">5</a>
<a href="/?page=6">6</a> 
<a href="/?page=7">7</a> <a href="/?page=8">8</a> 
<a href="/?page=9">9</a> <a class="next_page" rel="next" href="/?page=2">Next →</a>
</div>
  </div>
</div>
       <div id="id2" style="display:none;">text 2</div>
       <div id="id3" style="display:none;">text 3</div>
       <div id="id4" style="display: block;"><div class="currentusershow">
      <h3>Microposts (50)</h3>
      <ol class="currentusermicroposts">
        <li id="micropost-295">
  <a href="/users/1"><img alt="Example User" class="gravatar" src="https://secure.gravatar.com/avatar/bebfcf57d6d8277d806a9ef3385c078d?s=50"></a>
  <span class="user"><a href="/users/1">Example User</a></span>
  <span class="content">
  Aut et est culpa numquam.

  </span>
  <span class="timestamp">
    Posted 3 months ago.
      <a data-confirm="You sure?" rel="nofollow" data-method="delete" href="/microposts/295">delete</a>
  </span>
.
.
.
.

  </ol>
  <div class="pagination"><span class="previous_page disabled">← Previous</span> <em class="current">1</em> 
<a rel="next" href="/users/1?add_param=1&amp;page=2">2</a> 
<a class="next_page" rel="next" href="/users/1?add_param=1&amp;page=2">Next →</a></div>

0 个答案:

没有答案