javascript - div中的按钮不起作用

Question

最初我的 div(里面有按钮)是隐藏的，当我按下一个按钮时，我制作了 10 个该 div 的克隆。

我希望能够单独使用每个按钮(它们都具有相同的属性和类别)。目前我无法使用任何按钮。

 <div class="search-result">
                        <h3>Titel(year)</h3>
                        <button class="btn btn-warning btnFavorite">Favorite</button>
                        <button id="btnArkiv" class="btn btn-warning btnFAvorite">Arkiv</button>
  </div>

$(".btnFavorite").on("click", function(){
    alert("hej");
    var input = $("#search").val();
    saveFavorite(favoriteMovie);
});

复制div x次的方法。

for(movie in search){
    console.log(search[movie].Title);
    favoriteMovie = search[movie].Title;
    $(".search-result:first").clone().appendTo(".search").find('h3').text(search[movie].Title);
    $('#your_element').attr('id','the_new_id');
}

Answer 1

我已将输入元素替换为实际按钮并将事件委托(delegate)给正文，以便新插入的影片按钮自动使用相同的事件处理程序。 div 克隆功能也可以使用一些更新，但它应该可以工作，这不是问题所在。 :)

您可能还必须更新使用该值的任何函数，因为它现在是一个数据值属性。希望对您有所帮助。

PS:我平时不使用jQuery，所以未经测试，可能会有语法错误。

<div class="search-result">
    <h3>Titel(year)</h3>
    <button data-value="Favoritfilm" class="btn btn-warning btnFavorite">buttonText</button>
    <button id="btnArkiv" data-value="Arkiv" class="btn btn-warning">buttonText</button>
 </div>

$("body").on("click", ".btnFavorite", function() {
    alert("hej");
    var input = $("#search").val();
    saveFavorite(favoriteMovie);
});