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

Solution 2 :

Use data() instead of attr:

element.data("attribute");

Solution 3 :

You can do something like this:

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

Problem :

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!

Comments

Comment posted by Roko C. Buljan

Why not paste the HTML result (instead of the template snippet?)

Comment posted by Roko C. Buljan

.attr("atributte");

Comment posted by Roko C. Buljan

@JesúsCova even in my example? Are you loading jQuery in the correct way? Any errors in console?

Comment posted by 54.237.7.12

54.237.7.12

Comment posted by Roko C. Buljan

@JesúsCova Inspect element. You have 4 buttons instead of only 2

Comment posted by Roko C. Buljan

@JesúsCova and you’re getting

Comment posted by Jesús Cova

PERFECT!! TY! TY ! 😀

Comment posted by Jesús Cova

it says undefined yet

Comment posted by Jesús Cova

it says undefined yet

Comment posted by Hashemi Rafsan

In your div there is not data-attribute that’s why you are getting undefined

By

Leave a Reply

Your email address will not be published. Required fields are marked *