باستخدام حدث طفرة DOMSubtreeModified.في مسج

Question

لقد استخدمت كود jQuery التالي على صفحتي وكل شيء يعمل بشكل جيد على chrome. ولكن عندما أفتح الصفحة المعنية في فايرفوكس أحصل على خطأ البرنامج النصي غير المستجيب.

أعلم أنه وفقًا لمواصفات DOM3، تم إهمال أحداث الطفرة.ولكن لا يزال إذا كان أي شخص يمكن أن يساعدني هنا، سأكون مضطرا.

jQuery('#term').on("DOMSubtreeModified",function(){
$("#term > .click-slide").click(function(){
            $(this).siblings().slideToggle();

            });
 });

HTML المعني هو:

<div class="btn-slide" id="term">
    <div class="click-slide">
      <button>Search Terms </button>
    </div>
    <div class="btn-box">
       <label><span>Novena</span></label>
    </div>
</div>

Answer 1

يبدو أنه في Firefox، الدعوة إلى .slideToggle() هو اثارة DOMSubtreeModified الحدث، بينما لا يحدث هذا في Chrome.لذلك، في Firefox، هناك شيء ما يؤدي في البداية إلى تشغيل الحدث الذي يربط معالج النقر الخاص بك.كل شيء جيد في هذه المرحلة.عند المتابعة بعد ذلك للنقر، سيظهر slideToggle يحدث كما هو متوقع.ومع ذلك، يؤدي ذلك إلى إطلاق الحدث DOMSubtreeModified وينتهي بك الأمر بعد ذلك مع معالجي أحداث النقر اللذين يقومان بتنفيذ الأمر slideToggle لأنه تم تسجيلهم الآن مرتين.المرة التالية التي تنقر فيها هي عندما تحدث الحلقة اللانهائية.في الأساس، تستمر أحداث النقرات المتعددة في التشغيل DOMSubtreeModified الذي يسجل المزيد من معالجات النقرات مما يجعل المزيد slideToggles يحدث مما يثير المزيد DOMSubtreeModifiedس، وهكذا دواليك.لإصلاح هذه المشكلة، يمكنك استخدام jQuery .one الذي يخبر صفحتك بإطلاق ذلك فقط DOMSubtreeModified معالج مرة واحدة، مما يمنع هذه الحلقة.إذا لم يكن هذا حلاً مناسبًا، فستحتاج فقط إلى التوصل إلى طريقة أخرى للتأكد من ذلك .click لا يتم ربط المعالجات أكثر من مرة.

jQuery('#term').one("DOMSubtreeModified",function(){   //Notice this is using .one and not .on

ألق نظرة على هذا JSFiddle - إنه يستخدم .one لكنني تمكنت من التحقق من أنه عند استخدام .on، حدثت المشكلة في Firefox وليس في Chrome.

Answer 2

حسنا هذا قد لا يكون مناسب الإجابة هنا منذ كان السؤال عن الطفرة-الأحداث, أحد نشرت أدناه باستخدام MutationObserver ولكن لا يزال أنا نشر أنها قد تجد بعض هذه مفيدة.

هذا هو البديل اعتدت على DOMSubtreeModified الحدث في حالة بعض العقد يتم إضافتها في دوم.

var target = $( "#term" )[0];
// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
   mutations.forEach(function( mutation ) {
       var newNodes = mutation.addedNodes; // DOM NodeList
       if( newNodes !== null ) { // If there are new nodes added

        //alert('something has been changed');

      }
   });    
});

// Configuration of the observer:
var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
};

// Pass in the target node, as well as the observer options
observer.observe(target, config);
// Later, you can stop observing
// observer.disconnect();