Question

我有一个表格，我希望从data-url - 标记中获取<td>的值。表格的内容首先通过$.ajax GET填充。然后我使用complete - 函数在控制台上登录data-url的值。结果是undefined。

$(document).ready(function(){
    $.ajax({ 
        type: "GET",
        cache: false,
        url: "http://localhost:80/server/api/v1/files",
        success: function(data){    
            if (data.error) {
                console.log(data.error)
            } else {
                $("#t1").append(data);        

            }
        },
        error: function(data){            
        },
        complete: function(data){                
            console.log( $('#t1 #f1').data('url') );
        }
    });

表格首先如下：

<table id="t1"></table>

在Ajax调用之后，它看起来像这样：

<table id="t1">
  <tr>
    <th>
      Name
    </th>
  </tr>
  <tr>
    <td>
      <a id="f1" data-url="test" href="/Logo.jpg">...</a>
    </td>
  </tr>
</table>

在你的意见中获得data-url的价值的正确方法是什么？

Answer 1

使用data()函数使用jQuery访问数据属性。而不是attr()或prop()。虽然它们可能有用但可能不是最合适的。 See this Question以供参考。 jQuery.data() Reference

＆＃13;

$(document).ready(function(){
    console.log( $('#t1 #f1').data('url') );
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
<tr>
    <th>
        Name
    </th>
</tr>
<tr>
    <td>
        <a id="f1" data-url="test" href="/Logo.jpg">...</a>
    </td>
</tr>

＆＃13;

希望这会有所帮助：）

Answer 2

EDIT2，评论之后。

问题是您在文档准备好时运行此代码。但该表从ajax调用中显示，这意味着在运行代码时元素不存在。您应该在ajax complete事件中移动该函数。

编辑：使用你想要的那个。您的问题包括2个不同的问题。

＆＃34;如何最好地访问数据属性？＆＃34;，它已被覆盖here。你想要的东西主要取决于你的情况，但是使用jQuery的数据属性使得使用.data（）而不是.attr（）非常有趣。因为.attr（）将始终返回存储在HTML中的值，而数据将返回可能已更改的对象的数据。这甚至可能不仅仅是纯文本......

＆＃34;选择dom元素的最有效方法是什么？＃34;它在各处得到了很多答案，但为了简短，如果你的元素有id，请使用它。如果没有，请尽量做到最精确......我会让您详细了解这一点。

你的一些尝试工作......见这里。

＆＃13;

$(document).ready(function(){
    console.log(1, $('#t1 #f1').attr('data-url') ); //works
    console.log(2, $('#t1 f1').attr('data-url') );
    console.log(3, $('#t1 tr td a').attr('data-url') );//works
    console.log(4, $('#t1').attr('data-url') );
    console.log(5, $('#f1').attr('data-url') );//works
    console.log(6, $('#f1').data("data-url") );
    console.log(7, $('#f1').data("url") );//works (is best IMO)
    console.log(8, $('#t1 tr td a f1').attr('data-url') );
    console.log(9, $('#t1 tr td a f1').data('url') );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
<tr>
    <th>
        Name
    </th>
</tr>
<tr>
    <td>
        <a id="f1" data-url="test" href="/Logo.jpg">...</a>
    </td>
</tr>

＆＃13;

jQuery使用.attr（）方法定义未定义的结果

2 个答案: