為什么單擊鼠標后看不到動態創建的按鈕上的數據字段？

Question

編輯：這是一個JSFiddle，它顯示了我遇到的問題：

http://jsfiddle.net/gyhvpmgy/4/

---

我有以下創建動態div的功能：

InvalidField.prototype.getMessageStructure = function(){
    var div = $('<div></div>').addClass('invalidRow');      
    var span = $('<span></span>')
        .text(this._message)
    var button = $('<button></button>')
        .addClass('btn_AlertFocus')
        .text("Go To Field")
        .data("field", this._field[0].name)    

    return div.append(button).append(span);
};

在返回行之前，通過調試，我可以看到button.data（'field'）包含，因為它應該是：“ applicant.email”。

我還具有以下通用按鈕單擊事件：

$(document).on('click', '.btn_AlertFocus', function() {
    var field = $(this).data('field');
    goToFieldFromAlert('input[name="' + field + '"]');
});

現在，“字段”出現為undefined。

有誰能告訴我為什么，這可能很明顯-這是我的新功能？

以下是采用此返回的字符串值的代碼段。

function validateForm(){
    if(list_Invalid.size() > 0){
        var structure = "";
        for ( i = 0; i < list_Invalid.size(); i ++){
            structure += list_Invalid.item(i).getMessageStructure()[0].outerHTML;
        }
        var alert = new Alert(structure, 
                function(){
                }
            ).showAlert();      
        return false;
    }
    return true;
}

非常感謝！

Answer 1

jQuery使用內部表示來處理data 。

如果您最初在HTML元素上具有data屬性，則執行$('foo').data('bar')會導致jQuery將屬性讀入內存。 進一步使用該data ，對其進行修改，不會導致該屬性發生更改。

如果您首先沒有該屬性，則jQuery將使用內存中的data ，並且該屬性將永遠不會出現在HTML中。

要顯式更新HTML屬性，請使用以下命令：

$('foo').attr('data-bar', 'value');

但這比較慢，並將值轉換為字符串。