jQuery：检测数据元素的变化答案

【问题标题】：jQuery: Detect a change on a data elementjQuery：检测数据元素的变化
【发布时间】：2016-12-12 19:44:30
【问题描述】：

我正在尝试使用 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;
})

【问题讨论】：

看看stackoverflow.com/questions/16781778/…
或在这里：stackoverflow.com/questions/17528284/…

标签： javascript jquery

【解决方案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中熟悉按属性值选择元素

【讨论】：

谢谢，但是ID中的长号是生成的，所以我不能使用它。
感谢您的编辑...我正在尝试，但是当我在输入中输入数据时它不会触发。

【解决方案2】：

你有不正确的选择器，使用[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:

【讨论】：

【解决方案3】：

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

您应该始终委托 http://api.jquery.com/on/

【讨论】：