.attr（）メソッドのjQuery定義されていない結果

Question

<td>タグ内からdata-urlという値を取得したいテーブルがあります。テーブルの内容は、最初に$.ajax GETによって設定されます。次に、complete -functionを使用して、コンソールに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"> 
    <tr> 
    <th> 
     Name 
    </th> 
    </tr> 
    <tr> 
    <td> 
     <a id="f1" data-url="test" href="/Logo.jpg">...</a> 
    </td> 
    </tr> 
</table> 

にdata-urlの値を取得するための正しい方法何ができるか：Ajaxが、それはこのようになります呼び出した後

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

あなたの意見ですか？

Answer 1

data()関数を使用して、jQueryを使用してデータ属性にアクセスします。 attr()またはprop()ではありません。彼らは働くかもしれませんが、最も適していないかもしれません。参照のためSee this Question。 jQuery.data() Reference

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

<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>

このことができます:)

Answer 2

EDIT2を、コメントの後に希望。

問題は、ドキュメントの準備ができたらこのコードを実行していることです。しかし、表はajax呼び出しから現れます。つまり、コードが実行されたときに要素が存在しないことを意味します。あなたはajax completeイベントの中で関数を移動する必要があります。

編集：必要なものを使用します。あなたの質問には2種類の質問が含まれています。

「データ属性にアクセスするにはどうすればよいですか」（here）あなたが望むものは主にあなたのケースに依存しますが、jQueryでデータ属性を使用すると、.attr（）ではなく.data（）を使用するのが非常に面白くなります。 .attr（）は常にH​​TMLに格納された値を返しますが、データはオブジェクトのデータを返します。オブジェクトのデータは変更されている可能性があります。これはプレーンテキスト以上のものかもしれません...

「dom要素を選択する最も効率的な方法は何ですか？」と多くの回答がありましたが、要素がIDを持っていればそれを短くするために使用します。もしそうでなければ、最も正確な可能性を試してみてください...私はあなたにこれについてもっと詳しくお伝えします。

あなたの試みのいくつかは...ここを参照してください。

$(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')); 
 
});

<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>