gpt4 book ai didi

javascript - jQuery 单击处理程序仅触发一次

转载 作者:行者123 更新时间:2023-11-28 19:31:11 25 4
gpt4 key购买 nike

附加图像用作按钮来显示/隐藏标题下方的内容:

<!DOCTYPE html>
<html>
<body>
<h2>
the heading
</h2>
<p>
the content
</p>
</body>
</html>


$(document).ready(function () {
var $imag = $("<img src='arrow_down.jpg'>");
var $imag2 = $("<img src='arrow_up.jpg'>");
$("h2").append($imag);

$($imag).on("click", function(){
$("p").hide();
($imag).remove();
$("h2").append($imag2);
});
$($imag2).on("click", function () {
$("p").show();
($imag2).remove();
$("h2").append($imag);
});
});

$(document).main(ready);

首先,图像在单击时起作用。但下次你点击它时,它不会无需刷新页面。为什么?

最佳答案

这是因为像 click() 这样的事件处理程序必须在页面加载时附加到 DOM 中已有的元素上。对于稍后添加的元素,必须使用 on() 从静态父元素委托(delegate)事件,例如:

$(document).on("click", $imag, function(){
$("p").hide();
($imag).remove();
$("h2").append($imag2);
});
$(document).on("click", $imag2, function () {
$("p").show();
($imag2).remove();
$("h2").append($imag);
});

刚刚添加了 Fiddle进行调整,因为我不确定这是否适用于变量 $imag/$imag2 (它不适用)。相反,您应该只向图像添加类,例如像这样:

var $imag = $("<img class='down' src='arrow_down.jpg'>");
var $imag2 = $("<img class='up' src='arrow_up.jpg'>");

调整后的代码

$(document).on("click", '.down', function(){
$("p").hide();
$('.down').remove();
$("h2").append($imag2);
});
$(document).on("click", '.up', function () {
$("p").show();
$('.up').remove();
$("h2").append($imag);
});

引用:https://api.jquery.com/on/#on-events-selector-data-handler ,“直接和委托(delegate)事件”部分:

"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."

关于javascript - jQuery 单击处理程序仅触发一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26748448/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com