Question

我试图在data-元素上使用更改来触发元素来触发某些jQuery（而不是css类）。下面的HTML由Ruby Gem生成，因此我无法控制id。我确实添加了一个数据元素。

<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)')

不是你想要的。请尝试以下方法。

＆＃13;

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

＆＃13;

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

＆＃13;

您可以熟悉在MDN CSS#Attribute_selectors

中按属性值选择元素

Answer 2

TryRemove(key, out value)

你应该总是委派 http://api.jquery.com/on/

Answer 3

您有不正确的选择，请使用[data-number-to-text="true"]代替:data(number-to-text)：

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery：检测数据元素的更改

3 个答案: