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

您似乎在使用点击事件而未使用正确的ID。 $（＆＃34; .btnFavorite＆＃34;）在这里您需要使用正确的ID，该ID与您要激活的按钮相关。在这种情况下＆＃34; btnArkiv＆＃34;。

Answer 2

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

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

PS：我通常不使用jQuery，因此未经测试，可能存在语法错误。

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

.pins tq144

Answer 3

＆＃13;

var movieList = [
      {
        'ID': 1,
        'title': 'Movie 1',
        'year': 1988
      },
      {
        'ID': 2,
        'title': 'Movie 2',
        'year': 2017
      }
    ];

$(".btnFavorite").on("click", function(){
    alert("hej");
    var input = $("#search").val();
    saveFavorite(favoriteMovie);
});

$(".btnAdd").click(function() {
  for(index in movieList){    
    $(".list").append("<div class='search-result' data-id=" + movieList[index].ID + "><h3>" + movieList[index].title + " (" + movieList[index].year + ")</h3><button class='btn btn-warning btnFavorite' data-action='favoritize-id-" + movieList[index].ID + "'>Favorite Movie " + movieList[index].ID + "</button></div>");
  }
});

＆＃13;

.search-result {
    background-color: #EEE;
    padding: 20px;
    margin: 15px 0;
}

.search-result h3 {
    display: inline-block;
}

.search-result button {
    display: inline-block;
    margin: 0 0 0 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn btn-warning btnAdd">Show Movie List</button>

<div class="list"></div>

＆＃13;

Answer 4

根据.on的文档，这就是为什么你发现只有你的第一组按钮在克隆结果10次后才起作用的原因：

事件处理程序仅绑定到当前选定的元素;它们必须在您的代码调用.on（）时存在。要确保元素存在且可以选择，请将脚本放在HTML标记中的元素之后，或者在文档就绪处理程序中执行事件绑定。或者，使用委派事件来附加事件处理程序。

您可以在此处详细了解：http://api.jquery.com/on/。

由于没有太多信息可以继续，所以你可以使用同一个事件处理程序的一种方法是使用事件委托作为评论中提到的CBroe。

查看我在这里的所有按钮工作的片段。

$(".search").on("click", function(e) {
  if ($(e.target).hasClass('btnFavorite')) {
    alert('hej');
  }
});

for (var i = 0; i < 10; i++) {
  $(".search-result:first").clone().appendTo(".search");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <div class="search-result">
    <h3>Titel(year)</h3>
    <input type="submit" value="Favoritfilm" class="btn btn-warning btnFavorite">
    <input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning">
  </div>
</div>

在代码段中，我在父容器上放置了一个监听器，然后在发出警报之前检查点击的目标是否是正确的按钮。

div中的按钮不起作用

4 个答案: