javascript - 页面9个div，一个loadmore按钮，点击按钮加载3个div，为什么加载出来的div点赞按钮不能用呢？
1.页面本身有9个p，然后下方是loadmore按钮，点击loadmore，加载出三个p，加载出的p和之前存在的p除了内容不同，结构是一样的，原来的9个p的点赞功能是正常的，但是为什么加载出的p的点赞按钮就不能用呢？查看了一个控制台，对于加载出的新内容，点击"点赞"时候并没有发起ajax请求，这是什么原因？
jquery:
//news页面的loadmore功能
$(document).ready(function(){
$(document).on("click", "#news-show", function(){
var no = $("#news-currentresult").val();
$.ajax({
type:"GET",
url:"functions/php/newspageload.php",
data:{page:no},
success:function(data){
no++;
$("#news-currentresult").val(no);
$("#news-showdata").append(data);
// $(".view-news").append(data);
}
});
});
})
//点赞功能
$(document).ready(function(){
// 获取所有flag元素
// var flaglist = $(".flag");
$(".flag").on("click" ,function(){
//获取页面点赞次数
var $self = $(this);
var count = $(this).find(".count").text();
//获取news id数据传递到php
var id= $(this).parent().siblings().find(".ds-subtitle").attr("rel");
// alert(count);
// alert(id);
$.ajax({
url:"functions/php/like.php",
type:"POST",
// cache:false,
data:{count:count,id:id},
success:function(data){
// alert(data);
var str = data.split(",");
var bool = str[0];
var nums = str[1];
// alert(nums);
// console.log(data);
if (bool == "0") {
alert("尚未登录");
$("#popup-box1").show();
}
if (bool == "1"){
// alert("你已登录");
// $("#popup-box1").hide();
$("span .count",$self).text(nums);
}
}
});
});
});php:
<?php
$conn = mysqli_connect("localhost", "root", "", "maroon5");
//$page 1 0,3
//$Page 2 3,3
$page = $_GET['page'];
$startLimit = ($page -1)*3;
$sql = " SELECT * FROM news LIMIT $startLimit,3 ";
$result = mysqli_query($conn, $sql);
while($row = $result -> fetch_assoc()){
?>
<article class="grid-news">
<header class="feature-wrapper">
<p class="feature-background">
<a href="#">
<img src="images/news/<?php echo $row['id']; ?>.jpg" />
</a>
</p>
</header>
<p class="ds-card">
<p>
<h5>
<!-- rel属性作为news_id -->
<a class="ds-subtitle" href="#" rel="<?php echo $row['id']; ?>">Watch Maroon 5 performing on Fallon tomorrow!</a>
</h5>
</p>
<p class="summary">
<p class="post-name">
<span>Mar </span>
<span>23rd </span>
<span>2017 </span><br />
</p>
<p class="post-body">
<p>We're announcing two new shows in Punta Cana, Dominican Republic & Panama City, Panama....</p>
</p>
</p>
</p>
<!-- 动态获取点赞数目并显示 -->
<?php
//从数据库获取count
$sql1 = " SELECT * FROM fav WHERE news_id=$row[id] ";
$res1 = mysqli_query($conn, $sql1);
$nums = mysqli_num_rows($res1);
?>
<p class="post-footer">
<p class="flag">
<span class="flag-wrapper">
<a class="flag-action" href="#">
<i class="fa fa-heart-o" ></i>
<?php
echo "<span class='count'>". $nums ."</span>";
?>
<!-- <span class="count">0</span> -->
<span class="flag-text" >Like this news post</span>
</a>
</span>
</p>
</p>
</article>
<?php
}
?>
html:
<p class="view-news">
<!-- 1-8没有贴上来 -->
<!-- 9 -->
<article class="grid-news">
<header class="feature-wrapper">
<p class="feature-background">
<a href="#">
<img src="images/news/9.jpg" />
</a>
</p>
</header>
<p class="ds-card">
<p>
<h5>
<!-- rel属性作为news_id -->
<a class="ds-subtitle" href="#" rel="9">Watch Maroon 5 performing on Fallon tomorrow!</a>
</h5>
</p>
<p class="summary">
<p class="post-name">
<span>Mar </span>
<span>23rd </span>
<span>2017 </span><br />
</p>
<p class="post-body">
<p>We're announcing two new shows in Punta Cana, Dominican Republic & Panama City, Panama....</p>
</p>
</p>
</p>
<!-- 动态获取点赞数目并显示 -->
<?php
$conn = mysqli_connect("localhost", "root", "", "maroon5");
//从数据库获取count
$sql1 = " SELECT * FROM fav WHERE news_id=9 ";
$res1 = mysqli_query($conn, $sql1);
$nums = mysqli_num_rows($res1);
?>
<p class="post-footer">
<p class="flag">
<span class="flag-wrapper">
<a class="flag-action" href="#">
<i class="fa fa-heart-o" ></i>
<?php echo "<span class='count'>". $nums ."</span>";
?>
<!-- <span class="count">0</span> -->
<span class="flag-text" >Like this news post</span>
</a>
</span>
</p>
</p>
</article>
<p id="news-showdata"></p>
</p>
<ul class="news-load-more">
<li class="pager-next">
<input type="hidden" id="news-currentresult" value="4" />
<button id="news-show">Load more</button>
</li>
</ul>
