EACH event binding on dynamically created elements

Question

i have this func :

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

But I need to transform it when the elements are dynamically appended, for example i know how it to do for click func, but on EACH - no:

    $(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

insert it right under the block where I append the cards 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);
            });

Put the each() logic in a function and then call that function right after you append the new elements. — Rory McCrossan
– Rory McCrossan, Commented Jul 20, 2018 at 6:44

Bhushan Kawadkar · Accepted Answer · 2018-07-20 06:59:34Z

1

each is not an event so cannot use with .on. Try below function to iterate cards

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

edited Jul 20, 2018 at 6:59

answered Jul 20, 2018 at 6:29

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Bhushan Kawadkar Over a year ago

where are you appending the dynamic elements? you need to call above code right after it. can you try that

ZhaZha Over a year ago

updated the body of the question, immediately below the appended block

Bhushan Kawadkar Over a year ago

please put ; after $('.container').append(card). I have updated my post, can you please try with it now

ZhaZha Over a year ago

unfortunately the problem still exist

Bhushan Kawadkar Over a year ago

can you recreate it on jsfiddle or code snipped? also look for browser console error if any

|

Collectives™ on Stack Overflow

EACH event binding on dynamically created elements

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related