时间戳

首页 > 解决方案 > 如何为多个生成的元素设置 on.click？

javascript - 如何为多个生成的元素设置 on.click？

问题描述

作为一个学生项目，我们正在尝试建立一个提供电影推荐的网站。生成推荐后，我们希望用户能够点击任何电影海报，以获取有关该特定电影的更多信息。.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 + '>');

我希望能够只选择一个元素，但事实并非如此。我希望我能正确和足够详细地解释。任何帮助将不胜感激。谢谢！

标签： javascriptjqueryonclickjquery-selectorsclass-attributes

解决方案

您正在.on('click')对动态生成的 html 进行事件直接处理。这行不通。因为最初加载脚本时，没有带有 class 的元素posters。

你必须使用这样的东西

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

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

例如，假设您有一个带有类的 div，该类posters-container已经存在于页面加载中。您正在将img带有类的标签附加posters到此 div。所以你需要点击所有img带有 class 的标签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);
    })

在这段代码中，您可以看到您getMoviePosters(movieTitles)在 for 循环中调用该函数。您的 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!");             
    })
})

推荐阅读