Как настроить on.click для нескольких сгенерированных элементов?

Question

Как студенческий проект, мы пытаемся создать веб-сайт, который дает рекомендации для фильмов. После того, как рекомендации будут сгенерированы, мы хотим, чтобы пользователь мог нажать на любой из постеров фильма, чтобы получить больше информации об этом конкретном фильме. .On ('click') в настоящее время выбирает все результаты, которые не являются идеальными ...

В нашем нынешнем виде это то, что мы имеем:

axios.get(omdbCall + movieTitles)
  .then(function(response){

  let movies = response.data.results;

  for (i=0; i < movies.length; i++) {
     var posterPath = movies[i].poster_path;
     var movieID = movies[i].id;
     var movTitle = movies[i].title;
     var movImg = "https://image.tmdb.org/t/p/w92";

     $('#movPoster').append('<img class="posters" src=' + movImg + posterPath + '>');
   }

     $(".posters").on("click", function () {
        console.log("I clicked a poster!");
     })
})

Мы также попытались изменить визуализированный тег img, добавив в него идентификатор на основе названия фильма или его imdbID. Мы попытались использовать этот селектор для обеих попыток:

$("#" + movTitle)

С этим изменением в функции добавления:

$('#movPoster').append('<img id=' + movTitle + ' src=' + movImg + posterPath + '>');

Я ожидал, что смогу выбрать только один элемент, но это не то, что происходит. Надеюсь, я объяснил правильно и достаточно подробно. Любая помощь будет принята с благодарностью. Спасибо!

Answer 1

причина

Возможно, когда код $(".posters").on("click",...) выполняется, пока img.posters или #movPoster все еще не отображается в html. Так что события щелчка не срабатывают.

решение

• Вы можете попробовать переместить свой код внутрь $(function() { // move your codes here }); ( связанный вопрос !) Или просто добавить console.log($('#movPoster'), $('#movPoster .posters')) перед $(".posters").on("click",...), чтобы проверить, существуют целевые элементы или нет.
• И привязывайте события щелчка к #movPoster вместо img.posters。

advice

Для повышения производительности вы должны рефакторинг своего кода:

• Привязать события щелчка к #movPoster вместо img.posters, что ухудшает производительность при прослушивании слишком большого количества событий.

• код $('#movPoster').append(element) в циклевызовет перерисовку безуспешно, для каждого цикла будет вставлен внутренний элемент #movPoster.Вы можете переписать это так:

var dom = '';
for(var i=0; i<3; i++) {
 dom += '<img src="">'
}
$('#movPoster').append(dom) // only insert dom 1 time, not 3 times

Answer 2

вы делаете .on('click') событие directclty для динамически генерируемого html.Это не сработает.Потому что, когда скрипт был загружен изначально, нет элемента с классом posters.

. Вы должны использовать что-то вроде этого

$("#not_dynamic_element").on("click", ".posters", function(){
 // Code here
});

Логика в том, что вы должны выбрать элемент, которыйне загружается динамическит.е. статический элемент, который является предком класса posters.

Например, скажем, у вас есть div с классом posters-container, который уже присутствует при загрузке страницы.Вы добавляете тег img с классом posters к этому div.Так что вам нужно нажать на все теги img с классом posters, вы можете написать,

$(".posters-container").on("click", ".posters", function(){
 // Code here
});

Надеюсь, вы поняли логику и в чем проблема.

ОБНОВЛЕНИЕ - ВОПРОС ЛОГИКИ В FIDDLE

Я вижу, что не так в вашей скрипке.Я пытаюсь сделать это простым.Так что проверьте этот код, который вы написали

axios.get(finalSearch)
    .then(function(response){
        // console.log(response);
        let movies = response.data.Similar.Results;
        // let posters = response.data.results.poster_path;
        for (i=0; i < movies.length; i++){
            // console.log(movies[i].Name);
            var movArr = movies[i].Name;
            var movStr = movArr.split(" ");
            var movieTitles = movStr.join("+")
            getMoviePosters(movieTitles);
        }         
    })
    .catch(function(err) {
        console.log(err);
    })

В этом коде вы можете видеть, что вы вызываете функцию getMoviePosters(movieTitles) внутри цикла for.Ваш цикл for содержит следующую строку, которую вы используете для выбора динамически сгенерированного элемента постера фильма.

$("#movPoster").on("click", function () {
    console.log("I clicked a poster!");             
})

Поэтому я бы предложил вам вызвать эту функцию щелчка после цикла for, как показано ниже (Удалить предыдущий код).Также добавьте класс posters, чтобы щелкнуть функцию.

axios.get(finalSearch).then(function(response){
    // console.log(response);
    let movies = response.data.Similar.Results;
    // let posters = response.data.results.poster_path;
    for (i=0; i < movies.length; i++){
        // console.log(movies[i].Name);
        var movArr = movies[i].Name;
        var movStr = movArr.split(" ");
        var movieTitles = movStr.join("+")
        getMoviePosters(movieTitles);
    }
    $("#movPoster").on("click", '.posters', function () {
        console.log("I clicked a poster!");             
    })
})