javascript - jQuery:检测数据元素的变化

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

不是你想要的。尝试以下操作。

$("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 中熟悉按属性值选择元素。