通过js添加的元素点击事件无法触发

Question

js添加div的语句： 
var blk_have ="<div class="+"sw-off"+" ></div>";
$("#blk").prepend(blk_have);

    
$(".sw-off").click(function(){
    $(this).toggleClass("sw-on");
});
只截取了部分代码

但是手动在页面上这样写 却可以触发click事件.....
想问问这样为什么不会更改class？

Answer 1

试试这样写：

var blk_have ='<div class="sw-off"></div>';
$('#blk').prepend(blk_have);

    
$(document).on('click', '.sw-off', function(){
    $(this).toggleClass('sw-on');
});

Answer 2

动态添加的dom元素最好用事件代理来获取添加的元素，你这样写可能会失效，获取不到新添加DOM元素。建议写成，

$("#blk").on('click','.sw-off',function(){

$(this).toggleClass('sw-on');

})

Answer 3

恐怕是因为你的 class 写得不对，按照你的写法根本没有双引号嘛

Answer 4

一般通过js动态添加的元素，在事件触发时元素还没有添加上。在加事件时需要用到on（或live，新版本的jQuery中用‘on’代替‘live’，你可以看一下你的jQuery的版本）。如下：
$(".sw-off").on('click',function(){

$(this).toggleClass("sw-on");

})

你再试一下可不可以。