CODEWITHSUNDEEP
javascriptjquery
port5432
port5432

Reputation: 6403

jQuery: Detect a change on a data element

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;
})

Upvotes: 1

Views: 451

Answers (3)

react_or_angluar
react_or_angluar

Reputation: 1574

$(':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

Upvotes: 2

Andriy Ivaneyko
Andriy Ivaneyko

Reputation: 22051

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:

Upvotes: 1

maxito
maxito

Reputation: 21

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

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

Upvotes: 1

Related Questions