請幫助我理解為什么 js 在 div 中加載相同的內容后停止作業。
<main class="container">
<div id="reload_div">
<div id="color_div" style="width:100px;height:100px; background:red; margin-bottom: 100px">
orig
</div>
<button id="make_it_green" type="submit" class="btn btn-sm btn-primary">
make it green
</button>
</div>
<button id="reload_btn" type="submit" class="btn btn-sm btn-primary" style="margin-top:20px">
reload
</button>
</main>
<script>
$("#make_it_green").click(function(){
$("#color_div").css("background","green")
});
$("#reload_btn").click(function(){
$("#reload_div").fadeTo(300,0, function () {
$("#reload_div").load ("reload.php",
{ }, function () {
$("#reload_div").fadeTo(300,1, function () {
});
});
});
});
</script>
在“reload_div”中加載相同內容后#make_it_green 按鈕停止作業！為什么？
uj5u.com熱心網友回復：
當您按照發布的方式運行代碼時，事件處理程式會添加到make_it_green按鈕中。
使用 jQuery 加載新內容后，處理程式附加到的元素不再存在，因此事件處理程式不再存在。您加載了一個具有相同名稱的新元素，但除非您再次附加事件處理程式，否則不會附加任何事件處理程式。
或者，將事件處理程式附加到包含div并委托事件處理。
$("#reload_div").click(function(e){
e.preventDefault();
// Check the id of the original target element. If it's
// our button, change the colour.
if (e.target.id === "make_it_green") {
$("#color_div").css("background", "green");
}
});
有關事件委托的詳細討論，請參閱MDN 上的此頁面
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/399445.html
標籤：javascript php
上一篇：如何拆分字串并在php中迭代