I have a shopping cart view cart list count and this document
<div class="input-group input-number-group">
<div class="input-group-button" onclick="decrement_cart(this)">
<span class="input-number-decrement">-</span>
</div>
<input class="input-number text-center" type="number"
value="{{ $detail['product_quantity'] }}" min="0" max="1000">
<div class="input-group-button" onclick="increment_cart(this)">
<span class="input-number-increment">+</span>
</div>
</div>
and I want to change the middle input value by clicking on increment/decrement div. note: I can not use addEventListener because this document is created by ajax.
how can I change input value by clicking that ?
function increment_cart(elem) {
console.log(elem.closest('input'));
}
There's no reason why you couldn't add the event handler using addEventListener. Even if the element you are trying to attach the handler is created dinamically after the document was loaded. But since you didn't specify anything in details about that point on time, all I could do was suggesting how to select the sibling elements from the event handler called the way you specified in your html code (with inline event handlers). Such approach is not very good because you can attach only one handler that way and it's not strictly bound to a clear scope but to a string that will be evaluated.
Anyway to strictly address your issue when trying to fetch the siblings, you should use
.next()
and.prev()
(JQuery) to get the next and previous sibling.But, since you where looking for a better solution, I showed you how to attach those functions as event handlers of the click events for all the
.input-number-increment
and.input-number-decrement
using theattachHandlers
function and how those handlers should deal withevent.target
to get a reference to the element triggering the event and how to reach the wanted elements from there using.closest()
to retrieve the parent first and then.find()
to grab theinput
among its children.Here's a demo to show the concept (adding on top of your code):