jQuery .click doesn't work on jQuery-generated buttons

Question

I have a button that generates a div with text and a couple of buttons with jquery.

I have other divs exactly like this (that are not generated with jquery tho).

I also have a event handler (div_button.click(()=>{//code})) that does some tasks (changes color of the button and sends a socket message to the server).

I noticed that when i clicke the button on the jQuery-generated divs it doesn't work (it works only in original divs)

This is the div creator:

socket.on('main', (post) => {
  postContainer.prepend(`
      <div class="py-3 col col-lg-10 mx-auto post" id="${post._id}">
      <div class="toast">
          <div class="toast-header">
              <img src="${post.imgPath}" class="rounded mr-2" height="20" width="20">
              <strong class="mr-auto"><a class="profile-link" href="/user/${post.username}">${post.username}</a></strong>
              <small>${moment(post.time).fromNow()} </small>
          </div>
          <div class="toast-body pb-0">
            ${post.body}
          </div>
          <hr class="mb-0">
          <div>
              <button class="btn btn-link text-muted pr-1 upvote">
                  <svg class="bi bi-shift-fill mb-2 align-baselin" data-rotate="90" width="1em" height="1em" fill="currentColor">
                      <path fill-rule="evenodd" d="M7.27 2.047a1 1 0 011.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v3a1 1 0 01-1 1h-5a1 1 0 01-1-1v-3H1.654C.78 10.5.326 9.455.924 8.816L7.27 2.047z" clip-rule="evenodd"/>
                  </svg> 
              </button>
              <span class="mx-1 vote">${post.votes}</span>
              <button class="btn btn-link text-muted pl-1 downvote">
                  <svg class="bi bi-shift-fill rotate align-baseline" width="1em" height="1em" fill="currentColor">
                      <path fill-rule="evenodd" d="M7.27 2.047a1 1 0 011.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v3a1 1 0 01-1 1h-5a1 1 0 01-1-1v-3H1.654C.78 10.5.326 9.455.924 8.816L7.27 2.047z" clip-rule="evenodd"/>
                  </svg>
              </button>
          </div>
        </div>
      </div>
    `);
});

And this is one of the two event listeners (both inside a "$(() => { //events... })"):

  upvote.click(function() {
    let value = Number($(this).next().text())
    let id = $(this).parents(".post").attr("id");
    if ($(this).hasClass('upvoted')) {
    // code
    } else if ($(this).next().hasClass("downvoted")) {
    // code
    } else {
    //code
    }
  });

jQuery works only on non-jQuery generated contents, what do you think?

That is because the button's selector didn't exist at the time the page was loaded. You need to select a higher level element, and then test to see if that element has your created button's selector. For example, search for something like `.toast .upvoted`. — Sablefoste, May 21 '20 at 13:18

score 2 · Accepted Answer · answered May 21 '20 at 13:25

2

Instead of


$('.yourButtonClass').click(function() {

});

try a solution like this:


$('body').on('click', '.yourButtonClass', function (e) {

}

In this way the click event will be available always for .yourButtonClass.

answered May 21 '20 at 13:25

Francesco Orsi

1,739
4
16
32

jQuery .click doesn't work on jQuery-generated buttons

1 Answers1