为什么单击鼠标后看不到动态创建的按钮上的数据字段？

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');

但这比较慢，并将值转换为字符串。