jQuery: Detect a change on a data element

Question

I'm trying to use a change on a data- element to trigger element to trigger some jQuery (instead of a css class). The HTML below is generated by a Ruby Gem, so I don't have control over the id. I did add a data element.

<input data-number-to-text="true" class="numeric integer optional form-control" type="number" step="1" name="deck[cards_attributes][1481571763648][number]" id="deck_cards_attributes_1481571763648_number">

Then I am trying to target the data element, but this jQuery does not fire:

$(':data(number-to-text)').change(function(){
  debugger;
})

have a look at http://stackoverflow.com/questions/16781778/detecting-attribute-change-of-value-of-an-attribute-i-made — bjelli, Dec 12 '16 at 19:49
or here: http://stackoverflow.com/questions/17528284/does-setting-jquery-data-trigger-an-event — Steve0, Dec 12 '16 at 19:49

score 2 · Answer 1 · edited Dec 12 '16 at 20:16

2

$(':data(number-to-text)')

is not what you want. Try the following.

$("input[data-number-to-text^='true']").change(function(){
  debugger;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-number-to-text="true" class="numeric integer optional form-control" type="number" step="1" name="deck[cards_attributes][1481571763648][number]" id="deck_cards_attributes_1481571763648_number">

You can get familiar with selecting element by attribute value in MDN CSS#Attribute_selectors

edited Dec 12 '16 at 20:16

Andriy Ivaneyko

20,639
6
60
82

answered Dec 12 '16 at 19:58

react_or_angluar

1,568
2
13
20

Thanks but the long number in the ID is generated so I can't use it. – port5432 Dec 12 '16 at 20:02
Thanks for the edit ... I'm trying it but it doesn't fire when I enter data in the input. – port5432 Dec 12 '16 at 20:11

score 1 · Answer 2 · answered Dec 12 '16 at 20:06

1

$('form').on('change','input.numeric',function(){
});

You should always delegate http://api.jquery.com/on/

answered Dec 12 '16 at 20:06

maxito

21
4

Andriy Ivaneyko · Accepted Answer · 2016-12-12T20:14:17.093

You have incorrect selector, use [data-number-to-text="true"] instead of :data(number-to-text):

$('[data-number-to-text="true"]').change(function(){
  alert('Change triggered');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-number-to-text="true" class="numeric integer optional form-control" type="number" step="1" name="deck[cards_attributes][1481571763648][number]" id="deck_cards_attributes_1481571763648_number">
Then I am trying to target the data element, but this jQuery does not fire:

jQuery: Detect a change on a data element

3 Answers3