event listener not working for button created in handlebars

[3point14guy]

I created a button in handlebars that I would like to send an AJAX request. I believe I have the event listener moved to the correct place so that it will 'listen' after the button is created, but somehow, the AJAX request still is not being triggered.

This is similar to issue #985, which I have implemented that fix to the best of my ability.

I would appreciate assistance troubleshooting this.

const getAllMovies = function (event) {
  event.preventDefault()
  $('#delete-movie').on('click', deleteMovie)
  console.log('events getAllMovies')
  api.requestAllMovies()
    .then(ui.allMoviesSuccess)
    .catch(ui.allMovieFailure)
  $('document').on('click', '#delete-movie', deleteMovie)
}

{{#each movies as |movie|}}

  <p data-id="{{movie.id}}">{{movie.name}} <button id="delete-movie" type="button" class="btn btn-danger btn-sm">Delete Movie</button><br/>
    {{movie.year}}<br/>
    {{movie.rating}} Stars  <button id="update-rating" type="button" class="btn btn-warning btn-sm">Update Rating</button>
  </p>
  <div>

[benjimelito]

So you're correct in that you need to attach a click handler after an element has been rendered, but the way you have it set up now does not actually wait for api.requestAllMovies() to finish running before adding that handler, because it is not part of a .then statement. I would try putting this code inside ui.allMoviesSuccess

[payne-chris-r]

const getAllMovies = function (event) {
  event.preventDefault()
  $('#delete-movie').on('click', deleteMovie)
  console.log('events getAllMovies')
  api.requestAllMovies()
-    .then(ui.allMoviesSuccess)
-    .catch(ui.allMovieFailure)
-  $('document').on('click', '#delete-movie', deleteMovie)
+    .then(ui.allMoviesSuccess)
+    .then(() => $('document').on('click', '#delete-movie', deleteMovie))
+    .catch(ui.allMovieFailure)
}

[payne-chris-r]

Or put it in the first .then() block right after ui.allMoviesSuccess

[3point14guy]

Ben, I had tried putting it in the ui previously, but then it looked like I was going to have a circular reference problem bc the deleteMovie function was in my events file.

Chris, I tried your suggestion and the click event is still not triggering.

const getAllMovies = function (event) {
  event.preventDefault()
  $('#delete-movie').on('click', deleteMovie)
  console.log('events getAllMovies')
  api.requestAllMovies()
    .then(ui.allMoviesSuccess)
    .then(() => $('document').on('click', '#delete-movie', deleteMovie))
    .catch(ui.allMovieFailure)
}

[3point14guy]

Moved the listener event to the ui and now the click event now works. However, I do have the circular dependency. I will open a new issue for that.

const allMoviesSuccess = function (data) {
  store.movie = data.movie
  console.log('get all Movies success')
  $('.display-list').empty()
  const displayMoviesHTML = displayMoviesTemplate({ movies: data.movies })
  $('.display-list').append(displayMoviesHTML)
  $('#delete-movie').on('click', deleteMovie)
}