$(this).attr("data-id") 返回未定义

Question

I'm building a webshop and on every item there is a button to add that item to the shopping cart.

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

when you click on the button the executeJS() in the last few lines gets called from a seperate file.

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 wanted to grab the data-id from the button that has been clicked, with

$(this).attr("data-id"); but all i get is a header that has undefined as data-id.

id=undefined&action=add

can anyone please point me in the right direction?

thanks

Answer 1

The problem is because $(this) is not correctly being applied to the element you're trying to access. When using a string based onclick handler ( onclick="test()" ), this refers to the window, and NOT the element you're trying to access.

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

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

If you want to use the string based onclick notation, pass your element in explicitly, and do $(element) .

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

Javascript:

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

Personally, skip the attr-id all together, and simply pass your id directly:

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

Answer 2

It looks like this may be pointing to the window instead of the button.

You can fix this by manually looking for the button:

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

This will only really work if you only have one button. What you should do is use jquery to attach the event to the button.

In your 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.");
    });
})

The e.target refers to the button that is being clicked.

Answer 3

Use regular function ( function(){} ) instead of arrow function:

$(document).on("click",".deleteBtn",function(){
    //Your Code
});

Answer 4

Since you're using jQuery, this is how you should be doing it. First, remove the inline event handler in your PHP (eg onclick = \\"executeJS()\\" )

The other issue is that your buttons don't have a data attribute but their <i> children do.

Next, create your jQuery event handler, binding to the button. By doing this you can use $(this).find('i') to get the fontawesone <i> element and its data attribute, .attr("data-id") :

$('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