jQuery - 事件委托仅针对第一个新创建的元素

时间:2016-09-05 10:41:25

标签: javascript jquery event-delegation

我正在尝试创建一个简单的类似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>

2 个答案:

答案 0 :(得分:2)

您正在添加具有相同ID加,计数和减号的多个投票系统。但Ids应该是独一无二的。而是使用具有相同类的类,并使选择器在类上工作。请查看以下代码段以获得更多理解。

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

答案 1 :(得分:0)

这是因为以下行:

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