Question

我有这个功能：

$(".card").each(function() {
  $(this)
    .closest('.collapse-group')
    .find('.btn')
    .toggle($(this).text().length > 16);
});

但是当元素被动态添加时，我需要对其进行转换，例如，我知道如何对click函数进行操作，但是在EACH上不行：

    $(document).on('click', '.btn', function(e) {
          e.preventDefault();
          var $this = $(this);
          var $collapse = $this.closest('.collapse-group').find('.collapse');
          $collapse.collapse('toggle');
        }); //- this func works

 $(document).on('each', ".card", function() {
      $(this)
        .closest('.collapse-group')
        .find('.btn')
        .toggle($(this).text().length > 16);
    });//??? - this func does not work

将其插入我添加卡片的方块正下方不起作用：

var card =
              `<hr>
            <h3>
          <p class="text-center " >${title}</p>
          </h3>
            <img class="col-12 ml-auto col-12 mr-auto" src=${images}>
            <div class="span4 collapse-group">
              <div class="text-center">
                <p><a class="btn btn-md btn-outline-dark btn-square" href="#">Check &raquo;</a></p>
              </div>
              <div class="collapse">
                <div class="card card-body">
                ${text}
                </div>
              </div>
            </div>`
            $('.container').append(card)
            $(document).find(".card").each(function() {
              $(this)
                .closest('.collapse-group')
                .find('.btn')
                .toggle($(this).text().length > 16);
            });

Answer 1

each不是事件，因此不能与.on一起使用。尝试以下功能来迭代卡片

 $('.container').find(".card").each(function() {
       var toggle = $(this).text().length > 16;
       var collapseGroup = $(this).closest('.collapse-group');
       collapseGroup.find('.btn').toggle(toggle);
    });

在动态创建的元素上的每个事件绑定

1 个答案: