javascript - 我有这段代码可以在 JSFiddle 中运行，但不能在我的网站上运行

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