Question

我想在页面上的元素内的文本发生变化时执行一个函数。该元素中的文本由另一个外部JS函数更新，因此我对该函数没有任何控制权。

更新：元素是一个范围。

<span class="dynamic">some Text</span>

Answer 1

有一项工作，

<强> Live Demo

$('#elementId').change(function(){
   alert("changed");
});

var previousVal = "";
function InputChangeListener()
{
   if($('#elementId').val() != previousVal)
   {
     previousVal  = $('#elementId').val();
     $('#elementId').change();    
   }
}

setInterval(InputChangeListener, 500);

$('#elementId').val(3);

Answer 2

尝试在该元素上添加事件

$('.target').change(function() {
  alert('Handler for .change() called.');
});

详细信息：http://api.jquery.com/change/

Answer 3

您可以通过让元素绑定到更改事件来完成此操作，当您使用text()设置文本值时，您将立即在元素上调用change()。

以下是一个示例：http://jsfiddle.net/WWuNf/1/

HTML：

<div id="field">Foo</div>

脚本：

$(document).ready(function(){
    $('#field').on('change', function(evt){
        foo();
    }).text('Bar').change();
});

function foo() {
 alert('changed');        
}

编辑：当然，这是指您的字段的值通过其他方式而不是直接用户交互而变化的时间。对于类似的东西，您需要绑定到keyup()或keypress()。

Answer 4

鉴于change()方法需要明确触发该事件，并且情况可能并非总是如此，我认为我会使用突变事件提供一些有点笨拙的替代方法。

在这种方法中，我设置了body元素来监听DOMCharacterDataModified事件，当textNode的值发生变化时触发（这意味着它不会根据设计，如果移除并替换textNode，则触发。因为我正在使用jQuery来实现这个... textNode的方法有点笨拙：

$('body').on('DOMCharacterDataModified', 'p', function(e){
    console.log(e.originalEvent.prevValue, e.originalEvent.newValue);
});

$('button').click(
    function(){
        var t = $(this).prev().val();
        document
            .getElementById('test')
            .firstChild.nodeValue += ' ' + t;
    });

JS Fiddle demo

重要的是要注意，在版本9以下的IE中不支持Mutation Events，所以虽然这有效（并且不需要手动事件触发），但它的可靠性不如简单地使用{{{ 1}}。

参考文献：

Answer 5

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

});

使用jquery在元素内的文本更改时调用函数？

5 个答案: