將事件附加到動態創建的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"));

Answer 2

警報中的內容是錯誤的。

你是說

this.data MINUS title

如果名稱中帶有短划線，則可以使用方括號表示法。

alert(this["data-title"]);

或與getAttribute更好

alert(this.getAttribute("data-title"));

或jQuery

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

所以帶有bg顏色更改的最終代碼應該是

img.on('click', function() {
    alert($(this).attr("data-title"));
    textHolder.css("background-color","#CCC");
    console.log(textHolder.css("background-color"))
});