javascript - 页面9个div，一个loadmore按钮，点击按钮加载3个div，为什么加载出来的div点赞按钮不能用呢？
问题描述
1.页面本身有9个div，然后下方是loadmore按钮，点击loadmore，加载出三个div，加载出的div和之前存在的div除了内容不同，结构是一样的，原来的9个div的点赞功能是正常的，但是为什么加载出的div的点赞按钮就不能用呢？查看了一个控制台，对于加载出的新内容，点击"点赞"时候并没有发起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">
<div class="feature-background">
<a href="#">
<img src="images/news/<?php echo $row['id']; ?>.jpg" />
</a>
</div>
</header>
<div class="ds-card">
<div>
<h5>
<!-- rel属性作为news_id -->
<a class="ds-subtitle" href="#" rel="<?php echo $row['id']; ?>">Watch Maroon 5 performing on Fallon tomorrow!</a>
</h5>
</div>
<div class="summary">
<div class="post-name">
<span>Mar </span>
<span>23rd </span>
<span>2017 </span><br />
</div>
<div class="post-body">
<p>We're announcing two new shows in Punta Cana, Dominican Republic & Panama City, Panama....</p>
</div>
</div>
</div>
<!-- 动态获取点赞数目并显示 -->
<?php
//从数据库获取count
$sql1 = " SELECT * FROM fav WHERE news_id=$row[id] ";
$res1 = mysqli_query($conn, $sql1);
$nums = mysqli_num_rows($res1);
?>
<div class="post-footer">
<div 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>
</div>
</div>
</article>
<?php
}
?>
html:
<div class="view-news">
<!-- 1-8没有贴上来 -->
<!-- 9 -->
<article class="grid-news">
<header class="feature-wrapper">
<div class="feature-background">
<a href="#">
<img src="images/news/9.jpg" />
</a>
</div>
</header>
<div class="ds-card">
<div>
<h5>
<!-- rel属性作为news_id -->
<a class="ds-subtitle" href="#" rel="9">Watch Maroon 5 performing on Fallon tomorrow!</a>
</h5>
</div>
<div class="summary">
<div class="post-name">
<span>Mar </span>
<span>23rd </span>
<span>2017 </span><br />
</div>
<div class="post-body">
<p>We're announcing two new shows in Punta Cana, Dominican Republic & Panama City, Panama....</p>
</div>
</div>
</div>
<!-- 动态获取点赞数目并显示 -->
<?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);
?>
<div class="post-footer">
<div 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>
</div>
</div>
</article>
<div id="news-showdata"></div>
</div>
<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>
你在事件处理函数里打个log就知道了。
原因在这。
大多数浏览器事件冒泡, 或者 传播，都是由内到外的，从在文档最深处的元素( 事件目标 event target)开始， 一路传递到body和document元素。（愚人码头注：事件冒泡简单的说就是，在冒泡路径上所有绑定了相同事件类型的元素上都会触发这些类型的事件。）在Internet Explorer 8和更低，一些事件，如change 和 submit本身不冒泡，但 jQuery 为了跨浏览器一致性， jQuery 在这些事件上模拟了冒泡行为。
如果省略selector或者是null，那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的
当提供selector参数时，事件处理程序是指为委派 事件（愚人码头注：通常也有很多人叫它代理事件）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发。
事件处理只能绑定在当前被选中的元素上;而且，在您的代码调用.on()的时候，他们必须已经存在。为了确保目前的元素可以被选择的（愚人码头注：即，存在），最好将脚本放在元素的HTML标记的后面或者在 document 的 ready 事件中进行事件绑定。 如果新的HTML被注入页面时，新的HTML放置到页面后，事件会绑定到匹配选择器（selector参数）的元素。 或者，使用委派事件绑定事件处理程序，如下所述。
委托事件 有一个优势，他们能在后代元素添加到文档后，可以处理这些事件。在确保所选择的元素已经存在的情况下，进行事件绑定时，您可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。 例如，这个已经存在的元素可以是 Model-View-Controller（模型 - 视图 - 控制器）模式中 View（视图） 的一个容器元素，或document。如果想监视所有文档中的冒泡事件的话。在加载任何其它 HTML 之前，document 元素在 head 中就是有效的，所以您可以安全的在 head 中进行事件绑定，而不需要等待文档加载完。
这篇关于javascript - 页面9个div，一个loadmore按钮，点击按钮加载3个div，为什么加载出来的div点赞按钮不能用呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
