Selector Attribute Value Name Multi-dimensional Event Handling using jQuery

Question

I'm trying to make a kind of interactive page. Basically, I'm using jQuery Repeater and code looks like below code.

HTML

<form class="repeater">
    <div data-repeater-list="group-a">
      <div data-repeater-item>
        <input type="text" name="text-input" value="A"/>
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
      <div data-repeater-item>
        <input type="text" name="text-input" value="B"/>
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
    </div>
    <input data-repeater-create type="button" value="Add"/>
</form>

This code is just an example in official Repeater website. As you can see, every input has a name attribute and it would be sort like group-a[0][text-input] if you initialize Repeater function. So, the one thing that I want to do is to handle this group-a[0][text-input] selector event.

The only code that I can come up with is:

$("input[name='group-a[][text-input]']").change(function () {
    // Kind of things.
});

But I'm not sure it is possible. If it is possible, I will make item order line. For example, if I add new item in this list, I can change price or quantity of this item and total amount would be calculated. If it is not, please tell me API or function library. I have a little bit of mind that I have to use React or Vue.js for making those things.

guest271314 · Accepted Answer · 2017-05-19T03:14:14.367

0

Pass "[data-repeater-list=group-a]:eq(0) [name=text-input]" selector to jQuery() to select input elements which are child nodes of first element having data-repeater-list attribute

$("[data-repeater-list=group-a] [name=text-input]")
.on("change", function() {
  console.log(this.value)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="repeater">
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input type="text" name="text-input" value="A" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
    <div data-repeater-item>
      <input type="text" name="text-input" value="B" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
  </div>
  <input data-repeater-create type="button" value="Add" />
</form>
<form class="repeater">
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input type="text" name="text-input" value="A" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
    <div data-repeater-item>
      <input type="text" name="text-input" value="B" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
  </div>
  <input data-repeater-create type="button" value="Add" />
</form>

edited May 19 '17 at 03:14

answered May 19 '17 at 03:09

guest271314

1
15
104
177

Thanks. I didn't know that It is possible to find child node. Let me ask one question, if I don't use :eq(0) in `[data-repeater-list=group-a] [name=text-input]`, I can find the child which has that name value right? – Won May 19 '17 at 03:21
But the problem is that when you add new `data-repeater-item`, it is not applied by previous jQuery function definition. – Won May 19 '17 at 03:36
@VincentC How is element appended to `document`? You can attach the event when the element is created dynamically, or use event delegation. See [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements/43224244?s=4|0.0000#43224244) – guest271314 May 19 '17 at 03:39
Basically, [jQuery Repeater](https://github.com/DubFriend/jquery.repeater) can do that when you click the add button. Thanks, I think it will be ok. I'll try it on. – Won May 19 '17 at 03:45

Selector Attribute Value Name Multi-dimensional Event Handling using jQuery

HTML

1 Answers1