ตรวจจับการเปลี่ยนแปลงเนื้อหาองค์ประกอบด้วย jQuery

change() ฟังก์ชันทำงานและตรวจจับการเปลี่ยนแปลงขององค์ประกอบฟอร์ม แต่มีวิธีตรวจจับเมื่อเนื้อหาขององค์ประกอบ DOM เปลี่ยนแปลงหรือไม่

สิ่งนี้ไม่ได้ผลเว้นแต่#contentจะเป็นองค์ประกอบแบบฟอร์ม

$("#content").change( function(){
    // do something
});

ฉันต้องการให้สิ่งนี้กระตุ้นเมื่อทำสิ่งต่างๆเช่น:

$("#content").html('something');

นอกจากนี้html()หรือappend()ฟังก์ชันไม่มีการโทรกลับ

ข้อเสนอแนะใด ๆ ?

เหล่านี้มีการกลายพันธุ์ของเหตุการณ์ที่เกิดขึ้น

ฉันไม่ได้ใช้ API เหตุการณ์การกลายพันธุ์ใน jQuery แต่การค้นหาคร่าวๆทำให้ฉันไปที่โปรเจ็กต์นี้บน GitHub ฉันไม่ทราบถึงวุฒิภาวะของโครงการ

ฉันรู้ว่าโพสต์นี้มีอายุหนึ่งปีแล้ว แต่ฉันต้องการเสนอแนวทางการแก้ปัญหาที่แตกต่างออกไปสำหรับผู้ที่มีปัญหาคล้ายกัน:

1. เหตุการณ์การเปลี่ยนแปลง jQuery ถูกใช้เฉพาะในช่องป้อนข้อมูลของผู้ใช้เนื่องจากหากมีการจัดการสิ่งอื่นใด (เช่น div) การจัดการนั้นมาจากโค้ด ดังนั้นค้นหาว่าการจัดการเกิดขึ้นที่ใดจากนั้นเพิ่มสิ่งที่คุณต้องการลงไปที่นั่น

2. แต่ถ้าเป็นไปไม่ได้ไม่ว่าด้วยเหตุผลใด ๆ (คุณกำลังใช้ปลั๊กอินที่ซับซ้อนหรือไม่พบความเป็นไปได้ในการ "เรียกกลับ") แนวทาง jQuery ที่ฉันแนะนำคือ:

   สำหรับการจัดการ DOM อย่างง่ายให้ใช้ jQuery Chaining และ traversing$("#content").html('something').end().find(whatever)....

   ข หากคุณต้องการทำอย่างอื่นให้ใช้ jQuery bindกับเหตุการณ์ที่กำหนดเองและtriggerHandler

   $("#content").html('something').triggerHandler('customAction');
   
   $('#content').unbind().bind('customAction', function(event, data) {
      //Custom-action
   });

นี่คือลิงค์ไปยังตัวจัดการทริกเกอร์ jQuery: http://api.jquery.com/triggerHandler/

เบราว์เซอร์จะไม่เริ่มเหตุการณ์ onchange สำหรับ<div>องค์ประกอบ

ฉันคิดว่าเหตุผลที่อยู่เบื้องหลังสิ่งนี้คือองค์ประกอบเหล่านี้จะไม่เปลี่ยนแปลงเว้นแต่จะแก้ไขโดย javascript หากคุณต้องแก้ไของค์ประกอบด้วยตัวเองอยู่แล้ว (แทนที่จะเป็นผู้ใช้ทำ) คุณก็สามารถเรียกใช้รหัสประกอบที่เหมาะสมในเวลาเดียวกับที่คุณแก้ไของค์ประกอบได้ดังนี้:

 $("#content").html('something').each(function() { });

คุณยังสามารถเริ่มเหตุการณ์ด้วยตนเองเช่นนี้:

 $("#content").html('something').change();

หากวิธีแก้ปัญหาเหล่านี้ไม่เหมาะกับสถานการณ์ของคุณคุณช่วยให้ข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่คุณพยายามทำโดยเฉพาะได้ไหม

แล้วhttp://jsbin.com/esepal/2

$(document).bind("DOMSubtreeModified",function(){
  console.log($('body').width() + ' x '+$('body').height());
})

เหตุการณ์นี้ได้ถูกเลิกใช้แล้วเนื่องจากMutation Observer API

พยายามเชื่อมโยงกับDOMSubtreeModifiedเหตุการณ์เพื่อดูว่าการทดสอบเป็นเพียงส่วนหนึ่งของ DOM

ดูโพสต์นี้ที่ SO:

วิธีการทำผมจอ-the-Dom สำหรับการเปลี่ยนแปลง

ลองสิ่งนี้สร้างโดย James Padolsey (JP ที่นี่ใน SO) และทำสิ่งที่คุณต้องการ (ฉันคิดว่า)

http://james.padolsey.com/javascript/monitoring-dom-properties/

และด้วย HTML5 เรามีDOM Mutation Observersดั้งเดิม

ไม่ใช่คำตอบของ jQuery อย่างเคร่งครัด แต่มีประโยชน์ในการกล่าวถึงสำหรับการดีบัก

ใน Firebug คุณสามารถคลิกขวาที่องค์ประกอบในโครงสร้าง DOM และตั้งค่า 'Break on Attribute Change':

เมื่อมีการเปลี่ยนแปลงแอตทริบิวต์ในสคริปต์หน้าต่างดีบักจะปรากฏขึ้นและคุณสามารถติดตามสิ่งที่เกิดขึ้นได้ นอกจากนี้ยังมีตัวเลือกสำหรับการแทรกองค์ประกอบและการลบองค์ประกอบด้านล่าง (ป๊อปอัปใน screengrab ถูกบดบังอย่างไม่ช่วยเหลือ)

ฉันกำลังพัฒนาไลบรารี JS เล็ก ๆ ที่เรียกว่า mutabor ( https://github.com/eskat0n/mutabor ) ซึ่งมีวัตถุประสงค์เพื่อลดความซับซ้อนในการใช้งาน DOM Mutation Events ดูตัวอย่าง demo.html

ลองใช้ปลั๊กอิน livequery ดูเหมือนจะใช้ได้ผลกับสิ่งที่คล้ายกับที่ฉันกำลังทำอยู่

http://docs.jquery.com/Plugins/livequery

บ่อยครั้งวิธีที่ง่ายและมีประสิทธิภาพในการบรรลุเป้าหมายนี้คือการติดตามว่าคุณกำลังแก้ไข DOM เมื่อใดและที่ไหน

คุณสามารถทำได้โดยการสร้างฟังก์ชันกลางหนึ่งฟังก์ชันที่รับผิดชอบในการแก้ไข DOM เสมอ จากนั้นคุณทำการล้างข้อมูลที่คุณต้องการในองค์ประกอบที่แก้ไขจากในฟังก์ชันนี้

ในแอปพลิเคชันล่าสุดฉันไม่ต้องการการดำเนินการในทันทีดังนั้นฉันจึงใช้การเรียกกลับสำหรับฟังก์ชัน handly load () เพื่อเพิ่มคลาสให้กับองค์ประกอบที่แก้ไขใด ๆ จากนั้นอัปเดตองค์ประกอบที่แก้ไขทั้งหมดทุกสองสามวินาทีด้วยตัวจับเวลา setInterval

$($location).load("my URL", "", $location.addClass("dommodified"));

จากนั้นคุณสามารถจัดการได้ตามที่คุณต้องการ - เช่น

setInterval("handlemodifiedstuff();", 3000); 
function handlemodifiedstuff()
{
    $(".dommodified").each(function(){/* Do stuff with $(this) */});
}

คุณสามารถเพิ่มตัวเลือกการโทรกลับไปยังฟังก์ชัน html (หรือใดก็ได้):

$.fn.oldHtml = $.fn.html;
$.fn.html = function(html,fn){
  fn = fn || function(){};
  var result =  this.oldHtml(html);
  fn();
  return result;
};
$('body').html(11,function(){alert("haha");});

สาธิตที่นี่

คุณทำการเปลี่ยนแปลงในบางองค์ประกอบไม่ใช่องค์ประกอบถูกบังคับให้เปลี่ยนแปลงโดยสิ่งที่คุณต้องจับ

ฉันเขียนตัวอย่างข้อมูลที่จะตรวจสอบการเปลี่ยนแปลงขององค์ประกอบในเหตุการณ์

ดังนั้นหากคุณใช้รหัสจาวาสคริปต์ของบุคคลที่สามหรือบางสิ่งบางอย่างและคุณจำเป็นต้องรู้ว่ามีบางสิ่งปรากฏขึ้นหรือเปลี่ยนแปลงเมื่อคุณคลิกแล้วคุณสามารถทำได้

สำหรับตัวอย่างด้านล่างสมมติว่าคุณจำเป็นต้องทราบเมื่อเนื้อหาตารางเปลี่ยนแปลงหลังจากที่คุณคลิกปุ่ม

$('.button').live('click', function() {

            var tableHtml = $('#table > tbody').html();
            var timeout = window.setInterval(function(){

                if (tableHtml != $('#table > tbody').
                    console.log('no change');
                } else {
                    console.log('table changed!');
                    clearInterval(timeout);
                }

            }, 10);
        });

รหัสหลอก:

• เมื่อคุณคลิกปุ่ม
• html ขององค์ประกอบที่คุณคาดว่าจะเปลี่ยนแปลงถูกจับ
• จากนั้นเราจะตรวจสอบ html ขององค์ประกอบอย่างต่อเนื่อง
• เมื่อเราพบว่า html แตกต่างกันเราจะหยุดการตรวจสอบ

เราสามารถบรรลุนี้โดยใช้การกลายพันธุ์เหตุการณ์ อ้างอิงจาก www.w3.org โมดูลเหตุการณ์การกลายพันธุ์ได้รับการออกแบบมาเพื่อให้สามารถแจ้งเตือนการเปลี่ยนแปลงโครงสร้างของเอกสารรวมถึงการแก้ไข attr และข้อความ สำหรับรายละเอียดเพิ่มเติมกิจกรรมการปิดเสียง

ตัวอย่างเช่น :

$("body").on('DOMSubtreeModified', "#content", function() {
    alert('Content Modified'); // do something
});

เป็นไปไม่ได้ฉันเชื่อว่า ie มีเหตุการณ์ที่เปลี่ยนแปลงเนื้อหา แต่ไม่ใช่ x-browser อย่างแน่นอน

ฉันควรจะพูดว่าเป็นไปไม่ได้หากไม่มีช่วงเวลาที่น่ารังเกียจบางอย่างอยู่เบื้องหลัง!