如何为多个生成的元素设置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的id。 我们尝试使用此选择器进行两次尝试：

$("#" + movTitle)

通过追加功能的这种变化：

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

我希望能够只选择一个元素，但这不是正在发生的事情。 我希望我能够正确而详细地解释。 任何帮助将非常感激。 谢谢！

Answer 1

你在动态生成的html上制作.on('click')事件直接。 这不行。 因为最初加载脚本时，没有带有类posters元素。

你必须使用这样的东西

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

逻辑是你必须选择一个不动态加载的元素。 即，一个静态元素，它是posters类的祖先。

例如，假设你有一个带有posters-container的div，它已经存在于页面加载中。 您将带有类posters的img标记附加到此div。 所以你需要点击所有img标签和课程posters ，你可以写，

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

希望您了解逻辑以及问题所在。

更新 - 特殊情况下的逻辑问题

我看到你的小提琴出了什么问题。 我想让它变得简单。 请检查您编写的代码

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);
    })

在此代码中，您可以看到您在for循环中调用函数getMoviePosters(movieTitles) 。 您的for循环包含以下行，您可以使用该行选择动态生成的电影海报元素。

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

所以我建议你在for循环之后调用这个click函数，如下所示（删除前面的代码）。 另外添加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!");             
    })
})

Answer 2

原因

也许当代码$(".posters").on("click",...)运行时， img.posters或#movPoster仍未在html中呈现。所以未触发点击事件。

解

• 您可以尝试移动代码内部$(function() { // move your codes here }); （ 相关问题 ！），或者只是在$(".posters").on("click",...)之前添加console.log($('#movPoster'), $('#movPoster .posters')) $(".posters").on("click",...)验证目标元素是否存在。
• 并将点击事件绑定到#movPoster而不是img.posters 。

忠告

为了获得更好的性能，您应该重构代码：

• 将点击事件绑定到#movPoster而不是img.posters ，这会使得太多事件监听器的性能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