javascript点击事件没有触发动作

Question

在页面加载时，我有一个搜索框，一旦使用，填充一个包含多个图像的div。搜索中的javascript使用此函数将所有图像附加到div中

   function appendSomeItems(url, id, name, style) {
        return '<div><div class="md-card md-card-hover">         <div id="getImage" class="gallery_grid_item md-card-content"> <img class ="uk-align-center imageClick"></a>                               <div class="gallery_grid_image_caption">                                   <span class="gallery_image_title uk-text-truncate">' + name + '</span> <span>' + style + '</span> </div></div></div></div>';
    }

这非常有效。现在我正在努力使它当我点击任何一个图像时触发一个动作（在这种情况下是一个控制台日志）

    $('.imageClick').click(function handleImage() {
        console.log(good);
    });

但是，它什么也没做。没有错误但没有控制台日志。

我在这做错了什么？

Answer 1

您需要使用event-delegation将事件绑定到动态创建的元素：

这种方法使用document作为父元素，但是，一个好的做法是使用最接近的父元素。

$(document).on('click', '.imageClick', function handleImage() {
    console.log(good);
});

Answer 2

尝试使用.on()在动态创建的元素上附加事件。这将允许将事件附加到稍后添加到正文的元素：

$('body').on('click', '.imageClick' function handleImage() {
  console.log(good);
});

Answer 3

问题是您在动态创建项目之前调用$(".imageClick").click()。

这意味着jQuery实际上并没有将click侦听器绑定到项目，因为当运行$(".imageClick").click()时，元素实际上还不存在。

试试这个：

$("body").on("click", ".imageClick", function handleImage() {
    console.log("good");
});

有关更多信息，请参阅此帖子：In jQuery, how to attach events to dynamic html elements?