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

尝试使用https://en.wikipedia.org/wiki/Gregorian_calendar将 event 附加到动态创建的元素上。这将允许在稍后时间将事件附加到添加到正文的元素上：

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

Answer 3

问题在于您在动态创建项目之前正在调用name coming leave Peter 2019-03-02 05:43:33 2019-03-02 09:43:33 John 2019-03-02 09:43:33 2019-03-02 11:43:55 Eva 2019-03-02 11:43:55 2019-03-02 14:23:16 Maike 2019-03-02 14:23:16 2019-03-02 22:02:16 Sarah 2019-03-02 22:02:16 2019-03-03 06:22:11。

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

尝试一下：

$(".imageClick").click()

另请参阅此帖子以获取更多信息：link

javascript click事件未触发操作

3 个答案: