原因

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进行__iter__事件检查。这行不通。因为在最初加载脚本时，没有类.on('click')的元素。

您必须使用类似的东西

posters

逻辑是您必须选择一个不是动态加载的元素。即静态元素，它是$("#not_dynamic_element").on("click", ".posters", function(){ // Code here });类的祖先。

例如，假设您有一个类为posters的div，它已在页面加载时出现。您要将带有类posters-container的{{1}}标签附加到该div。因此，您需要点击类别为img的所有posters标签，您可以编写

img

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

更新-逻辑问题

我明白你的小提琴出了什么问题。我正在尝试简化。因此，请检查您编写的这段代码

posters

在此代码中，您可以看到您正在for循环内调用函数$(".posters-container").on("click", ".posters", function(){ // Code here });。 for循环包含以下行，可用于选择动态生成的电影海报元素。

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循环后调用此click函数（删除先前的代码）。还要添加getMoviePosters(movieTitles)类以单击功能。

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

Answer 2

原因

也许在$(".posters").on("click",...)或img.posters仍未用html呈现代码#movPoster的情况下运行，因此不会触发点击事件。

解决方案

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

建议

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

将点击事件绑定到#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

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

2 个答案:

原因

解决方案

建议