我可以让一个元素起作用,但是让第二个元素工作的第二个元素不会触发。谁能明白为什么?我最近才一直在使用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&page=2">2</a>
<a class="next_page" rel="next" href="/users/1?add_param=1&page=2">Next →</a></div>