Question

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

<!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);

首先，单击时图像工作。但是下次你点击它时，它没有无需刷新页面。为什么！！！！！！！

Answer 1

这是因为在加载页面时，必须将click（）等事件处理程序附加到DOM中已有的元素。对于稍后添加的元素，必须使用on（）从静态父元素委派事件，如：

$(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（它没有＆＃39; t）。相反，您应该只为图像添加类，例如像这样：

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，部分＆＃34;直接和委派活动＆＃34;：

＆＃34;事件处理程序仅绑定到当前选定的元素;在您的代码调用.on（）时，它们必须存在于页面上。＆＃34;

jquery点击处理程序只触发一次

1 个答案: