0

我避免使用$(this).attr()来获取自定义元素的值，并且我已经阅读过，如果您需要自定义元素，您应该在它前面加上data-并使用$(this).data()来访问该元素的内容（在我的情况下，它是动态填充的进入元素，因为元素是一组动态元素的一部分）

我的问题很简单。

<a id="' + node.Id + '" data-currentValue='+node.Name+' class="button icon-pencil with-tooltip" href="javascript:void(0);" title="Edit" onclick="UpdateAttributes($(this).data(\'currentValue\'), $(this).attr(\'id\'));"</a>

我在捕获它们后将值记录到控制台，但不出所料，该$(this).data()部分返回 undefined (value should be in this test case "asdf")，并且 id 返回我期望它返回的值（在我的情况下，2000046）。

这个元素有什么问题？我无法发现哪里出了问题，我不知道它为什么会抛出 undefined，我需要data-currentValue. 有什么想法和见解可以分享，这样我就可以从中获得我需要的价值data-currentValue？

整体动态元素：

    $("#tblAttributes tbody").empty();
    var tableContents = [];
    $.each(data.KeyValuePairs, function (i, node) {
        tableContents[tableContents.length] = '<tr>';
        tableContents[tableContents.length] = '<td>';
        tableContents[tableContents.length] = '<p>';
        tableContents[tableContents.length] = node.Name;
        tableContents[tableContents.length] = '</p>';
        tableContents[tableContents.length] = '</td>';
        tableContents[tableContents.length] = '<td>';
        tableContents[tableContents.length] = '<span class="button-group compact">';
        tableContents[tableContents.length] = '<a id="' + node.Id + '" data-currentValue='+node.Name+' class="button icon-pencil with-tooltip" href="javascript:void(0);" title="Edit" onclick="UpdateAttributes($(this).data(\'currentValue\'), $(this).attr(\'id\'));"</a>';
        tableContents[tableContents.length] = '<a id="' + node.Id + '" class="button red-gradient icon-trash with-tooltip confirm" href="javascript:DeleteAttribute('+node.Id+');" title="Delete" </a>';
        tableContents[tableContents.length] = '</span>';
        tableContents[tableContents.length] = '</td>';
        tableContents[tableContents.length] = '</tr>';
    });
    $("#AttributeCount").html(data.KeyValuePairs.length);
    $("#tblAttributes tbody").append(tableContents.join(""));

编辑

因此，我想到的这种方法既笨拙又麻烦（感谢 BlazeMonger 确认 .data() 尝试将所有内容转换为原始类型，因此我更改了代码以使用关联数组来访问我需要的信息。我不再需要元素中的自定义属性。

var attributes = {}; //associative array declared globally
...


$("#tblAttributes tbody").empty();
    var tableContents = [];
    attributes = {};
    $.each(data.KeyValuePairs, function (i, node) {
        attributes[node.Id] = node; //associating the node's id with the node for future use
        tableContents[tableContents.length] = '<tr>';
        tableContents[tableContents.length] = '<td>';
        tableContents[tableContents.length] = '<p>';
        tableContents[tableContents.length] = node.Name;
        tableContents[tableContents.length] = '</p>';
        tableContents[tableContents.length] = '</td>';
        tableContents[tableContents.length] = '<td>';
        tableContents[tableContents.length] = '<span class="button-group compact">';
        tableContents[tableContents.length] = '<a id="' + node.Id + '" class="button icon-pencil with-tooltip" href="javascript:void(0);" title="Edit" onclick="UpdateAttributes(' + node.Id +');"</a>';
        tableContents[tableContents.length] = '<a id="' + node.Id + '" class="button red-gradient icon-trash with-tooltip confirm" href="javascript:DeleteAttribute('+node.Id+');" title="Delete" </a>';
        tableContents[tableContents.length] = '</span>';
        tableContents[tableContents.length] = '</td>';
        tableContents[tableContents.length] = '</tr>';
    });
...
        function UpdateAttributes( attrId) {
        console.log(attributes[attrId].Name); //now I can access the information I needed which was to be stored as a custom attribute in the <a> element.
4

1 回答 1

2

该.data()方法在页面加载时检索data-一次 HTML 属性。之后，您可以更改data-属性，但不会更改data().

相反，用于设置将检索.data(name,value)的新值。.data(name)（另请注意，这不会同时更改data-HTML 属性。您可以更改其中一个。）

data-jQuery 有一些方法可以自动将当前属性一次提取到变量中可能很有用data()，但是从 jQuery 1.9 开始，不存在这样的内置功能。不过，写一个应该不难。

http://api.jquery.com/data/

于 2013-03-26T13:56:52.213 回答