聆听DIV内的变化并采取相应行动

Question

我有一个抓取XML文档并根据XSL文档转换它的函数。然后将结果放入ID为laneconfigdisplay的div中。我想要做的是，与转换逻辑分开，为该div设置jQuery更改事件，以便我可以告诉它何时更改，并运行一些jQuery代码。

我尝试了以下内容，但它不起作用！

$(document).ready(function()
{
    $('#laneconfigdisplay').change(function() {
        alert('woo');
    });
    //Do XML / XSL transformation here
});

<!-- HTML code here -->
<div id="laneconfigdisplay"></div>

我做错了什么？

Answer 1

您可以选择创建自己的自定义事件，这样您仍然可以清晰地分离逻辑。

绑定到自定义事件：

$('#laneconfigdisplay').bind('contentchanged', function() {
  // do something after the div content has changed
  alert('woo');
});

在更新div的函数中：

// all logic for grabbing xml and updating the div here ..
// and then send a message/event that we have updated the div
$('#laneconfigdisplay').trigger('contentchanged'); // this will call the function above

Answer 2

change事件仅限于input，textarea＆amp;和select。

有关详细信息，请参阅http://api.jquery.com/change/。

Answer 3

http://api.jquery.com/change/

更改仅适用于输入表单元素。

您可以在XML / XSL转换后触发函数或创建一个监听器：

var html = $('#laneconfigdisplay').html()
setInterval(function(){ if($('#laneconfigdisplay').html() != html){ alert('woo'); html = $('#laneconfigdisplay').html() } }, 10000) //checks your content box all 10 seconds and triggers alert when content has changed...

Answer 4

如果可能，您可以将div更改为textarea并使用.change（）。

另一个解决方案可能是使用隐藏的textarea并在更新div时同时更新textarea。然后在隐藏的textarea上使用.change（）。

您还可以使用http://www.jacklmoore.com/autosize/使文本区域更像div。

<style>
.hidden{
display:none
}
</style>

<textarea class="hidden" rows="4" cols="50">

</textarea>


$("#hiddentextarea").change(function() {

alert('Textarea changed');

})

更新：似乎textarea必须在更新后进行散焦，以获取更多信息：How do I set up a listener in jQuery/javascript to monitor a if a value in the textbox has changed?

Answer 5

虽然事件DOMSubtreeModified已被弃用，但截至目前仍在使用，因此对于任何临时项目，您可以将其用作以下内容。

$("body").on('DOMSubtreeModified', "#mydiv", function() {
    alert('changed');
});

从长远来看，您必须使用MutationObserver API。

Answer 6

有一个很棒的jquery plugin, LiveQuery, that does just this。

  

Live Query利用jQuery选择器的强大功能，通过绑定事件或自动神奇地触发匹配元素的回调，即使在页面加载和DOM更新后也是如此。

     

例如，您可以使用以下代码将click事件绑定到所有A标记，甚至可以通过AJAX添加任何A标记。<​​/ p>

$('a').livequery('click', function(event) { 
    alert('clicked'); 
    return false; 
}); 

  

在文档中添加新的A标记后，Live Query将绑定click事件，并且没有其他任何内容需要调用或完成。

这是working example of its magic ...

Answer 7

试试这个

$('#D25,#E37,#E31,#F37,#E16,#E40,#F16,#F40,#E41,#F41').bind('DOMNodeInserted DOMNodeRemoved',function(){
          // your code;
       });

不要使用它。这可能会导致页面崩溃。

$('mydiv').bind("DOMSubtreeModified",function(){
  alert('changed');
});