按鈕在div不工作

Question

最初我的div（與按鈕裏面）是隱藏的，當我按下按鈕時，我做了該div的10個克隆。

我希望能夠獨立使用每個按鈕（它們都具有相同的屬性和類）。目前我無法使用任何按鈕。

<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

我用實際按鈕替換了輸入元素，並將事件委託給主體，以便新插入的影片按鈕自動使用相同的事件處理程序。 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); 
}); 

Answer 2

看來您正在使用點擊事件而不使用正確的ID。 $（「。btnFavorite」）在這裏您需要使用正確的ID，它與您要激活的按鈕相關。在這種情況下「btnArkiv」。

Answer 3

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

.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; 
 
}

<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>

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>

在片段中，我把聽者在父容器上，然後檢查點擊目標是提醒前正確的按鈕。