如何检测 div 上的内容更改事件答案

【问题标题】：How to detect content change event on a div如何检测 div 上的内容更改事件
【发布时间】：2012-04-26 06:11:50
【问题描述】：

我正在尝试让编辑器到目前为止一切正常，但现在我需要制作一个处理程序，它可以检测 div 中所做的任何更改或 div 中编辑的任何内容

<?php $row="testing content" ?>
<!-- my editor section-->
<div id="editor">
    <div id="options">
        <span><a id="iimg">Insert Image from gallery</a></span>
        <span>Upload image to gallery</span>
        <span><a id="iheading">Heading</a></span>
    </div>
    <div id="product_descriptioncontent" contenteditable="true"><?php echo $row; ?>
    </div><!-- viewable editor -->
    <input type="hidden" name="textareacontent" value="" id="textareacontent" >
    <!-- hidden field to submit values -->
</div>
<!-- end of editor section -->
<div id="imc"></div> <!-- image gallery loading section -->

<script>
$(document).ready(function(){

    $('#iheading').click(function(){
    $('#product_descriptioncontent').append('<h1>Heading</h1>');
    });

    $('#iimg').click(function(){
        $('#imc').load('imagegallery.php',function(){
        $('#gallery img').on('click',function(){
            $('#product_descriptioncontent').append('<img  src="http://localhost/sites/site_pics/otherpic/1.png"><br>&nbsp;');
    });
    });
    });
    $('#product_descriptioncontent').change(function(){
    alert("pppp");// how to capture this event
    });
});
</script>

我在 jsfiddle http://jsfiddle.net/bipin000/UJvxM/1/ 上放了一些代码感谢您宝贵的时间

【问题讨论】：

api.jquery.com/change：此事件仅限于元素、框和 <select> 元素</select>
@Bipin 随意使用和元素和样式。
@Alon 但 textarea dosent 似乎显示图像
@Bipin - 我认为 jquery 中没有特殊事件可以检测 DIV 内的内容变化。我会使用 bind() 将自定义事件附加到 div 和 trigger() 在更改时对其进行事件
我不明白您期望并希望在 div 中检测到什么类型的变化？你能为我澄清一下@Bipin吗？

标签： javascript jquery dom html

【解决方案1】：

尝试为DOMCharacterDataModified 添加处理程序。可能是更清洁的解决方案。

【讨论】：

根据 Mozilla 的说法，“MutationObserver 为开发人员提供了一种对 DOM 中的变化做出反应的方法。它旨在替代 DOM3 事件规范中定义的突变事件。” developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/…
答案中的链接页面消失了，404
@fyngyrz 突变事件已被弃用，感谢您指出。

【解决方案2】：

你喜欢这个吗？ http://jsfiddle.net/Ralt/hyPQC/

document.getElementById( 't' ).onkeypress = function( e ) {
    var evt = e || window.event
    alert( String.fromCharCode( evt.which ) )
}

它不是在等待change 事件，这有点毫无意义。

相反，它正在侦听onkeypress 事件。每次用户更改此 div 的内容（通过向其添加字符）时，都会触发该事件。

您还可以查看如何让角色被点击（使用String.fromCharCode( evt.which )）。

PS：针对您的特定情况的完整 jQuery 解决方案如下：

$( '#product_descriptioncontent' ).on( 'keypress', function() {
    $( '#your-hidden-input' ).val( $( this ).text() )
    // Or
    $( '#your-hidden-div' ).text( $( this ).text() )
} )

【讨论】：

keypress 不是一个好的选择，因为当内容实际发生变化时它不会被触发。例如通过鼠标点击、拖放等粘贴。
[警告] fiddler 实际上不起作用，因为 js 函数写得不好。 “document.getElementById”只是“By”。也许有人没有看到它，只是放弃了页面。而且 div 没有样式，所以你看不到它。它需要一些调整，当我复制并粘贴上面列出的正确代码时，它可以工作。

【解决方案3】：

您可以将自定义事件绑定到 div 并在更改时触发该事件

Stack Snippets 和jsFiddle中的演示：

$(function() {

  $('#wrapper').bind("contentchange", function() {
    console.log("Captured content change event"); 
  });

  $("#btn").click(function() {
    $('#wrapper').html("new value").trigger("contentchange");
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="wrapper"></div>
<input type="button" id="btn" value="click here">

【讨论】：