2

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

更新：元素是一个跨度。

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

5 回答 5

6

有一个解决方法，

现场演示

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

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

setInterval(InputChangeListener, 500);

$('#elementId').val(3);
于 2012-09-21T15:28:40.357 回答
1

尝试在该元素上添加事件

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

详情：http ://api.jquery.com/change/

于 2012-09-21T15:35:35.423 回答
1

您可以通过将元素绑定到更改事件来做到这一点，并且当您设置文本值时，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()。

于 2012-09-21T15:43:42.913 回答
0

鉴于该change()方法需要显式触发该事件，并且可能并非总是如此，我想我会提供一个有点笨拙的替代方案，使用突变事件。

在这种方法中，我将body元素设置为侦听DOMCharacterDataModified事件，当 atextNode的值发生更改时触发（这意味着根据设计，如果移除和替换它，它不会触发）。textNode因为我正在使用 jQuery 来执行此操作，所以访问 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 小提琴演示。

重要的是要注意，版本 9 以下的 IE 不支持 Mutation Events，因此虽然这有效（并且不需要手动事件触发），但与简单地使用带有trigger().

参考：

于 2012-09-21T16:14:09.823 回答
-1 
$('#element').on('change', function() {

});
于 2012-09-21T15:38:04.540 回答