Question

我在下面的代码中使用HTML slim。

.page
  .paper
    button.button.js-copier I copy things

- content_for :js_includes do
  javascript:
    var startingHtml = $('.page').html();

    function initializePlugin() {
      $('.js-copier').each(function () {
        $(this).on('click', function () {
          $('.page').append(startingHtml);
          $(document).trigger('page-refreshed');
        });
      });
    }

    // Run it right away
    initializePlugin();

    $(document).on('page-refreshed', initializePlugin);

有没有办法解决这样一个事实：当我点击“我复制东西”按钮时，它会创建按钮的多个副本，因为它正在迭代所选按钮上的所有按钮？

此外，是否有更好的方法来编写此代码。我所要做的就是随时点击任何按钮（首先和任何新按钮创建的按钮）复制按钮

- 安东尼

Answer 1

首先改变这个：

  $('.js-copier').each(function () {
    $(this).on('click', function () {
      ...

到此：

  $('.page').on('click', '.js-copier', function () {
    ...

阅读本文以了解https://learn.jquery.com/events/event-delegation/#event-propagation

然后删除'page-refreshed'事件，因为您不需要它：

   $(document).trigger('page-refreshed');
   ...
   $(document).on('page-refreshed', initializePlugin);

演示解决方案：

var startingHtml = $('.page').html();

function initializePlugin() {
  $('.page').on('click', '.js-copier', function () {
    $('.page').append(startingHtml);
  });
}

// Run it right away
initializePlugin();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
  <div class="paper">
    <button class="button js-copier"> I copy things</button>
  </div>
</div>

Javascript事件触发创建多个按钮.on（'click）

1 个答案: