Question

我想在每次点击发布按钮时创建一个新按钮，每个新按钮都应该有自己的计数器。这在JSFiddle中有效，但在我使用时却没有。

 $(function() {
   $('.input_button').on('click', function() {
     text = $('.input_text').val();
     var btn = $("<button></button>");
     btn.text("Like!");
     $("body").append(btn);
     btn.after("<span class='clicks'></span>")
     var clicks = 0;
     btn.click(function() {
       clicks++;
       $(this).next(".clicks").html(clicks);
     });
     if (text != undefined) {
       post = '<div class="post test--post">' + '<img src="photo.JPG" width="20" height="25" alt=""/>' + '<p><span>jaleelg: </span></p>' + text +
         '<p>Clicks: <a id="clicks">0</a></p>' + "<br>" + Date() + " " + '</div>';
       new_post = $('.post_feed').append($(post))
       new_post = $('.post_feed').append($(btn))
     }
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <h3 id="feed">My Posts</h3>
  <section class="post_feed test--post_feed">
  </section>
</section>


<input class="input_text test--input_text" type="text">
<button type="submit" class="input_button test--input_button">Post</button>
<div id="clicks">

</div>

Answer 1

你必须改变：

btn.click(function() {
       clicks++;
       $(this).next(".clicks").html(clicks);
     });

像这样：

btn.click(function() {
$('.clicks').html(function(i, val) { return val*1+1 });       
     });

Answer 2

这支钢笔有效： http://codepen.io/anon/pen/ygRxOq?editors=0010

$(function() {

  $("body").on("click",".like",function(e) {
    clicks = $(e.target.parentElement).find("#clicks").text() / 1 + 1;
    $(e.target.parentElement).find("#clicks").text(clicks);
  });

  $('.input_button').on('click', function() {
    text = $('.input_text').val();
    post = '<div class="post test--post">' + 
               '<img src="photo.JPG" width="20" height="25" alt=""/>' + 
               '<p><span>jaleelg: </span></p>' + text + 
               '<p>Clicks: <a id="clicks">0</a></p>' + 
               '<br>' + Date() + '<br>'+
               '<button class="like">Like!</button>'+
           '</div>';

    new_post = $('.post_feed').append($(post));
  });

});

我有这个代码在JSFiddle中工作，但不在我的网站上

2 个答案: