Question

即使我有两段相同的代码，我也无法使用我的jquery函数。

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

$(".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和类;

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

为什么不起作用？

Answer 1

在您追加它之前，

.test button元素不存在。相反，您应该在添加按钮后添加click事件：

$("#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();
  });
});

修改

更好的方法是使用委托。这意味着当点击指定的元素时，点击事件将会看到是否有“按钮”按钮。绑定元素中的子节点，并将click事件传递给button元素：

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

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

javascript点击功能不适用于ID和Class？

1 个答案: