Getting Undefined Value jQuery and Html

Question

I have this HTML code:

<div class="cart-plus-minus">
  <input class="cart-plus-minus-box quantity" id="{{ $item->id }}" name="quantity[{{ $i }}]" value="{{ $item->quantity }}" type="text">
  <input  name="product_id[{{ $i }}]" value="{{ $item->id }}" type="hidden">
  <div class="dec qtybutton" data-attribute="{{ $item->id }}"><i class="zmdi zmdi-chevron-down"></i></div>
  <div class="inc qtybutton" data-id="{{ $item->id }}"><i class="zmdi zmdi-chevron-up"></i></div>
</div>

My jQuery code is this:

$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
    var element = jQuery(event.currentTarget);
    var url = element.attr("attribute");
    alert(url);
});

When I click in desc it displays an alert but the thing is that the value comes undefined, and I know that it is because it says $(document) but it's only way that it has worked... I wonder how can I get the value in data-attribute?

Thanks!

Answer 1

• To get data use .data("foo") or .attr("data-foo")

$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
    var url = $(this).data("attribute");
    alert(url);
});

Example:

 $(document).on('click', 'div.cart-plus-minus > div.dec', function(event) { var url = $(this).data("attribute"); // That's not an URL but OK alert(url); });

 <div class="cart-plus-minus"> <input class="cart-plus-minus-box quantity" id="888" name="quantity[0]" value="0" type="text"> <input name="product_id[0]" value="888" type="hidden"> <div class="dec qtybutton" data-attribute="888"><i class="zmdi zmdi-chevron-down"> DEC</i></div> <div class="inc qtybutton" data-id="888"><i class="zmdi zmdi-chevron-up"> INC</i> </div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Given the example from your link you have something like this:

 $(".dec, .inc").on('click', function() { const $inp = $(this).closest('.cart-plus-minus').find('.cart-plus-minus-box'); let val = Number($inp.val()); val += $(this).is('.inc')? 1: -1; $inp.val(Math.max(0, val)); });

 <div class="cart-plus-minus"> <input class="cart-plus-minus-box" name="quantity" value="1" type="text"> <button type="button" class="dec qtybutton"><i class="zmdi zmdi-chevron-down">-</i></button> <button type="button" class="inc qtybutton"><i class="zmdi zmdi-chevron-up">+</i></button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Also, fix the templating issues.

Answer 2

Use data() instead of attr:

element.data("attribute");

Answer 3

You can do something like this:

$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
    alert($(this).data('attribute'));
});