javascript 点击功能对 ID 和 Class 不起作用？

Question

即使我有两段相同的代码，我的 jquery 功能也无法正常工作。

这是主要的 jquery 函数（我删除了“<”）。

$(".spoiler").append("<button> Reveal Spoiler!</button>");
$(".spoiler button").click(function() {
    $(this).remove();
});

这将创建一个按钮，单击该按钮后该按钮将被删除。

现在当我这样做时：

$("#family-question").click(function(){
    $("#answer-one").append("<button> Answer One </button>");
    $("#answer-two").append("<button> Answer Two </button>");
    $(".test").append("<button> Answer Three </button>");
});

$(".test button").click(function() {  
    $(this).remove();
});

这将创建所有按钮。但是，如果我单击该按钮，它不会被删除。

就HTML代码而言。第一个是；

<p class="spoiler">
    <!--Spoiler:-->
    <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
</p>

第二个有一个ID还有一个class;

<p class="test" id="answer-one">
  <span>Answer Option one</span>
  </p>

为什么不起作用？

Answer 1

.test button 元素在您附加它之前不存在。相反，您应该在添加按钮后添加点击事件：

$("#family-question").click(function(){
   $("#answer-one").append("<button> Answer One </button>");
   $("#answer-two").append("<button> Answer Two </button>");
   $(".test").append("<button> Answer Three </button>");
   $(".test button").click(function() { // button exists now!
     $(this).remove();
  });
});

编辑：

一个更好的方法是使用委派。这意味着当指定元素被点击时，点击事件将查看绑定元素中是否有 'button' 子元素并将点击事件传递给那个 button 元素：

$(".test").on('click', 'button', function () {
   $(this).remove();
});

这样做的好处是您只需绑定一次事件，button 甚至不必存在。

javascript 点击功能对 ID 和 Class 不起作用？

javascript click function doesn't work for ID and Class?

javascript

jquery

click