$（this）.attr（ "data-id"）が返されて未定義

Question

私はwebshopを構築しています。すべてのアイテムにショッピングカートにそのアイテムを追加するボタンがあります。

<?php 
$i = 0; 
$path = "../images/women/winter/winter1"; 
$lang = "description_".get_param(); 

if(!$result = $db->query("SELECT * FROM cloths;")){ 
die("There was an error running the query [".$db->error."]"); 
} 
while($winter = $result->fetch_assoc()){ 
    echo "<div class = \"boxsale $winter[image]\"> 
       <img src = \"$path.jpg\"/> 
       <div class = \"test\"> $winter[$lang] </div> 
       <select> 
       <option>S</option> 
       <option>M</option> 
       <option>L</option> 
       <option>XL</option> 
       <option>XXL</option> 
       </select> 
       <button class = \"addToCart\" onclick = \"executeJS()\"> <i class = \"fa fa-shopping-cart\" data-id = \"$i\" aria-hidden=\"true\"></i></button> 
     </div>"; 
     $i++; 
    }?> 

</div> 

ボタンをクリックすると、最後の数行のexecuteJS（）が別のファイルから呼び出されます。

addToCart.js

function executeJS(){ 
    var id = $(this).attr("data-id"); 
    $.ajax({ 
    type: "GET", 
    url: "ajax.php?id=" + id + "&action=add" 
    }) 
    .done(function(){ 
    alert("Product has been added."); 
    }); 
} 

iは

$(this).attr("data-id");で、クリックされたボタンからのデータ-IDを取得したかったが、私が得るすべては未定義を持っているヘッダでありますデータIDとして。

id=undefined&action=add 

誰でも正しい方向に向けることができますか？ $(this)が正しくアクセスしようとしている要素に適用されていないので、

おかげ

Answer 1

問題があります。文字列ベースのonclickハンドラ（onclick="test()"）を使用する場合は、thisがウィンドウを参照し、NOTアクセスしようとしている要素を参照してください。

function test() { 
 
    console.log(this.id); 
 
}

<a href="#" id="test" onclick="test()" data-id="test">Link</a>

あなたは、文字列ベースのonclickの表記を使用して明示的にあなたの要素を渡し、$(element)をしたい場合。

<button class = \"addToCart\" onclick = \"executeJS(this)\" data-id = \"$i\" /> 

Javascriptを：個人的に

function executeJS(element){ 
    var id = $(element).data('id'); 
    ... 

、すべて一緒にATTR-IDを省略し、単に直接あなたのIDを渡す：

<button class = \"addToCart\" onclick = \"executeJS($id)\" /> 

Answer 2

あなたはjQueryのを使用しているので、これはどのようにありますあなたはそれをやっているはずです。まず、PHPのインラインイベントハンドラを削除してください（onclick = \"executeJS()\"）

その他の問題は、ボタンにデータ属性がなく、子どもの<i>子が行うことです。

次に、ボタンにバインドするjQueryイベントハンドラを作成します。これにより、あなたは.attr("data-id")、fontawesone <i>要素とそのデータの属性を取得するために$(this).find('i')を使用することができます。

$('button.addToCart').click(function() { 
    var id = $(this).find('i').attr("data-id"); 
    $.ajax({ 
     type: "GET", 
     url: "ajax.php?id=" + id + "&action=add" 
    }) 
    .done(function() { 
     alert("Product has been added."); 
    }); 
}) 

jsFiddle example

Answer 3

thisは、ウィンドウの代わりのボタンを指している可能性がありように見えます。

手動でボタンを探して、この問題を解決することができます

var id = $(".addToCart").attr("data-id"); 

一つだけのボタンを持っている場合にのみ、実際に動作します。何をあなたはする必要がありますボタンにイベントを添付するjqueryを使用します。あなたのJavaScriptで

：

$(".addToCart").click(function(e){ 
    var id = $(e.target).attr("data-id"); 
    $.ajax({ 
     type: "GET", 
     url: "ajax.php?id=" + id + "&action=add" 
    }) 
    .done(function(){ 
     alert("Product has been added."); 
    }); 
}) 

e.targetがクリックされているボタンを指します。