jQuery-事件委托僅針對第一個新創建的元素

Question

我正在嘗試創建一個簡單的類似於reddit的系統，用戶可以在其中添加帖子，然后與投票系統（隨表格一起粘貼）進行交互。

雖然我使用了事件委托，但它似乎只影響我的第一個新創建的元素。 因此，在第一個新創建的元素上，投票系統起作用。

但是，在后一個事件上，似乎確實發生了該事件，但它更新了第一個投票系統（每個帖子都附加了一個投票系統）。

任何幫助表示贊賞！ 謝謝。

$("#subbtn").on("click", function(event){

event.preventDefault();

var postTitle = $("#title").val(),
    postBody  = $("#content").val();


$("#title").val("");
$("#content").val("");

var html = "<div class='wrapper'><div class='panel panel-default'><p class='button' id='plus'>+</p><p id='count'>0</p><p class='button' id='minus'>-</p><h3>'" + postTitle + "</h3><p>" + postBody + "</p></div></div>";
$("body").append(html);
});

var counter = 0;

$(document).on("click", "#plus", function() {
   counter++;
   $("#count").text(counter);
});
$(document).on("click","#minus", function() {
   counter--;
   $("#count").text(counter);
});

我的HTML是：

<body>
<div class="panel panel-default" id="formStuff">
          <div class="form-group">
            <label for="title">Title </label> </label>
            <input type="title"  id="title" class="form-control">
          </div>
          <div class="form-group">
            <label for="content">Content </label>
            <textArea rows="5" type="content" id="content" class="form-control"></textArea>
          </div>
          <input type="submit" class="btn btn-success" id="subbtn">
     </div>


</body>

Answer 1

您正在添加具有相同ID的加號，計數和減號的多個投票系統。 但是ID應該是唯一的。 而是使用具有相同類的類，並使選擇器在這些類上工作。 請檢查以下代碼段以了解更多信息。

 $("#subbtn").on("click", function(event){ event.preventDefault(); var postTitle = $("#title").val(), postBody = $("#content").val(); $("#title").val(""); $("#content").val(""); var html = "<div class='wrapper'><div class='panel panel-default'><p class='button plus'>+</p><p class='count'>0</p><p class='button minus'>-</p><h3>'" + postTitle + "</h3><p>" + postBody + "</p></div></div>"; $("body").append(html); }); $(document).on("click", ".plus", function() { var counter = $(this).siblings(".count").text(); counter++; $(this).siblings(".count").text(counter); }); $(document).on("click",".minus", function() { counter--; var counter = $(this).siblings(".count").text(); counter--; $(this).siblings(".count").text(counter); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default" id="formStuff"> <div class="form-group"> <label for="title">Title </label> </label> <input type="title" id="title" class="form-control"> </div> <div class="form-group"> <label for="content">Content </label> <textArea rows="5" type="content" id="content" class="form-control"></textArea> </div> <input type="submit" class="btn btn-success" id="subbtn" /> </div>

Answer 2

這是由於以下行而發生的：

$(document).on("click", "#plus", function() {...});   
// here you are using id selector which are unique.

jQuery-事件委托僅針對第一個新創建的元素

問題描述

2 個解決方案

解決方案1
2 已采納 2016-09-05 10:59:04

解決方案2
0 2016-09-05 10:44:23

jQuery-事件委托僅針對第一個新創建的元素

問題描述

2 個解決方案

解決方案1 2 已采納 2016-09-05 10:59:04

解決方案2 0 2016-09-05 10:44:23

解決方案1
2 已采納 2016-09-05 10:59:04

解決方案2
0 2016-09-05 10:44:23