javascript - 将事件附加到动态创建的 dom 元素

Question

在下面的代码中，我动态创建不同的帖子。 每个帖子都有自己的图片。

$(function () {
    for(post in data){
        //get from the data post details

        var titleData = data[post]["title"];
        var descriptionData = data[post]["description"];
        var imageData = "images/"+data[post]["image"];
        //create elements with jquery
        var postHolder = $('<div class="post row"></div>');
        var img = $('<img src="'+imageData+'" data-title="'+titleData+'" class="col-sm-3 img-post">');
        var textHolder = $('<div class="col-sm-9"></div>');
        var title = $('<h4 class="title-post"></h4>').append(titleData);
        var description = $('<p class="explanation-post"></p>').append(descriptionData);

        
        textHolder.append(title);
        textHolder.append(description);

        postHolder.append(img);
        postHolder.append(textHolder);
        $('.posts-container').append(postHolder);


        img.on('click',function(){alert(this.data-title);});

    }


});

我希望当我单击图像时，它会提醒帖子的标题(称为“titleData”)，并且“textHolder”会将其背景颜色更改为灰色。

此挑战的限制是:

1. 每次传递不同的参数作为“titleData”。
2. 使用最小的内存空间。

Answer 1

data-title 是 JavaScript 中的无效标识符。要访问 data-* 属性，您可以使用 HTMLElement.dataset

 alert(this.dataset.title)

或者，当您使用 jQuery .data() 方法时。

alert($(this).data("title"));