Question

我在jQuery中使用$ .change时遇到了一些问题。

HTML

<button class="btn">Reset</button>
<p id="chg" class="change">Click Me</p>
<div class="onchange"></div>

JS

$('.btn').on('click', function() {
  $('.change').text('Click Me');
  $('.onchange').text('');
});
$('.change').on('click', function() {
  $('.change').text('Nearly There');
});
$('.change').on('change', function() {
  $('.onchange').text("Nice One");
});

以下是Codepen

的链接

基本上应该发生的是当点击“Click Me”时，文本将变为“Nearly There”，然后在“Nice One”出现在下面后直接显示。

然而，这没有发生，我已经尝试了两个

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

并且都不起作用。

注意我提供的代码是我的测试代码，并且与我正在尝试实现的内容相关。

更新我不知道.change只适用于表单控件，这可以解释为什么它不起作用。

解决方案 CreMedian - 建议我寻找的解决方案。

$('.change').on('DOMSubtreeModified', function() { });

我已更新CodePen以供将来参考。

Answer 1

$('.change').on('change', function() {

在您的示例中，.change是一个div，而div在点击时不会引发更改事件。

您可能只想更新click事件

中的两个元素

$('.btn').on('click', function() {
  $('.change').text('Click Me');
  $('.onchange').text('');
});
$('.change').on('click', function() {
  $('.change').text('Nearly There');
  $('.onchange').text("Nice One");
});

Answer 2

如评论中所示，.change()事件不适用于div元素。

获得相同效果的一种方法是使用以下代码：

$('.change').bind("DOMSubtreeModified",function(){
  //action you want when the '.change' object changes
});

Javascript MutationEvent不受广泛支持，因此在生产代码中实现此功能时要小心。

参考链接：http://help.dottoro.com/ljrmcldi.php

Answer 3

尝试DOMSubtreeModified事件。

$('.btn').on('click', function() {
  $('.change').text('Click Me');
  $('.onchange').text('');
});
$('.change').on('click', function() {
  $('.change').text('Nearly There');
});
$('.change').on('DOMSubtreeModified', function() {
  $('.onchange').text("Nice One");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button class="btn">Reset</button>
<p id="chg" class="change">Click Me</p>
<div class="onchange"></div>

注意： IE8及更旧版本不支持。

CodePen

中的演示

Answer 4

这样做

$('.change').text('Nearly There').trigger('change');

例如

$('.btn').on('click', function() {
  $('.change').text('Click Me');
  $('.onchange').text('');
});
$('.change').on('click', function() {
  $('.change').text('Nearly There').trigger('change');
});
$('.change').on('change', function() {
  $('.onchange').text("Nice One");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="btn">Reset</button>
<p id="chg" class="change">Click Me</p>
<div class="onchange"></div>

Answer 5

浏览器仅针对change，textbox和check/radio box触发select list个事件 - 所有表单元素。当您的<div>或<p>内的内容发生变化时，浏览器不会通知您的javascript。因此，听众.on('change'不会被激怒。

以下是引发事件的元素的简短列表：

TextBox 按Enter键时
广播/检查框状态更改后
选择列表更改所选项目时

以下是有关此事件的更多信息：Mozilla MDN onchange

Jquery.Change不工作

5 个答案: