jQuery: обнаружение изменения элемента данных

Question

Я пытаюсь использовать изменение в элементе data-, чтобы вызвать элемент для запуска некоторого jQuery (вместо класса css). HTML ниже генерируется Ruby Gem, поэтому я не контролирую идентификатор. Я добавил элемент данных.

<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"> 

Тогда я пытаюсь целевой элемент данных, но это Jquery не огонь:

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

Answer 1

Вы неправильный селектор, используйте [data-number-to-text="true"] вместо :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:

Answer 2

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

не то, что вы хотите. Попробуйте следующее.

$("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">

Вы можете ознакомиться с выбором элемента по значению атрибута в MDN CSS#Attribute_selectors

Answer 3

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

Вы всегда должны делегировать http://api.jquery.com/on/