JQuery ile öğe içeriği değişikliklerini tespit edin

change() işlevi çalışır ve form öğelerindeki değişiklikleri algılar, ancak bir DOM öğesinin içeriğinin ne zaman değiştirildiğini algılamanın bir yolu var mı?

Bu #content, bir form öğesi olmadığı sürece çalışmaz

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

Bunun aşağıdaki gibi bir şey yaparken tetiklenmesini istiyorum:

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

Ayrıca html()veya append()işlevin bir geri araması yoktur.

Baska öneri?

Bunlar mutasyon olaylarıdır .

JQuery'de mutasyon olay API'leri kullanmadım, ancak üstünkörü bir arama beni GitHub'daki bu projeye yönlendirdi . Projenin olgunluğunun farkında değilim.

Bu yazının bir yaşında olduğunu biliyorum ama benzer sorunu olanlara farklı bir çözüm yaklaşımı sunmak istiyorum:

1. JQuery değişiklik olayı yalnızca kullanıcı girdi alanlarında kullanılır, çünkü başka bir şey değiştirilirse (örneğin, bir div), bu işlem koddan gelir. Yani, manipülasyonun nerede gerçekleştiğini bulun ve ardından ihtiyacınız olanı oraya ekleyin.

2. Ancak herhangi bir nedenle bu mümkün değilse (karmaşık bir eklenti kullanıyorsanız veya herhangi bir "geri arama" olasılığı bulamıyorsanız), önereceğim jQuery yaklaşımı şudur:

   a. Basit DOM manipülasyonu için jQuery zincirleme ve çapraz geçişi kullanın,$("#content").html('something').end().find(whatever)....

   b. Başka bir şey yapmak isterseniz, jQuery'leri bindözel etkinlikle kullanın vetriggerHandler

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

İşte jQuery tetikleyici işleyicisine bir bağlantı: http://api.jquery.com/triggerHandler/

Tarayıcı, <div>öğeler için onchange olayını tetiklemeyecektir .

Sanırım bunun arkasındaki mantık, javascript tarafından değiştirilmedikçe bu unsurların değişmeyeceğidir. Öğeyi zaten kendiniz değiştirmeniz gerekiyorsa (bunu yapan kullanıcı yerine), öğeyi değiştirirken aynı zamanda uygun eşlik eden kodu çağırabilirsiniz, örneğin:

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

Bunun gibi bir olayı manuel olarak da tetikleyebilirsiniz:

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

Bu çözümlerden hiçbiri sizin durumunuz için işe yaramazsa, lütfen özellikle neyi başarmaya çalıştığınız hakkında daha fazla bilgi verebilir misiniz?

peki ya http://jsbin.com/esepal/2

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

Bu etkinlik, Mutation Observer API'nin lehine kullanımdan kaldırıldı

DOMSubtreeModifiedSeeign as test olayına bağlanmayı deneyin, DOM'un yalnızca bir parçasıdır.

SO'da bu gönderiye bakın:

nasıl--i monitör-dom-için-değişikliklerin

Bunu deneyin, James Padolsey tarafından oluşturuldu (burada JP burada SO'da) ve tam olarak istediğinizi yapıyor (sanırım)

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

HTML5 ile yerel DOM Mutation Observers'a sahibiz .

Kesinlikle bir jQuery cevabı değildir - ancak hata ayıklama için bahsetmek yararlıdır.

Firebug'da DOM ağacındaki bir öğeyi sağ tıklayabilir ve 'Öznitelik Değişikliğinde Kırılma' ayarlayabilirsiniz:

Bir betikte bir öznitelik değiştirildiğinde, hata ayıklama penceresi görünecek ve neler olduğunu takip edebilirsiniz. Aşağıda öğe ekleme ve öğe kaldırma seçeneği de vardır (ekran görüntüsündeki açılır pencere tarafından yardımcı olmadan engellenmiştir).

DOM Mutation Events'in kullanımını basitleştirmeyi amaçlayan mutabor ( https://github.com/eskat0n/mutabor ) adlı küçük JS kitaplığı geliştiriyorum . Örnekler için demo.html'ye bakın.

Livequery eklentisini deneyin. Yaptığım benzer bir şey için işe yarıyor gibi görünüyor.

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

Genellikle bunu başarmanın basit ve etkili bir yolu, DOM'u ne zaman ve nerede değiştirdiğinizi takip etmektir.

Bunu, her zaman DOM'un değiştirilmesinden sorumlu olan bir merkezi işlev oluşturarak yapabilirsiniz. Daha sonra bu işlevin içinden değiştirilen eleman üzerinde ihtiyacınız olan temizliği yaparsınız.

Yeni bir uygulamada, anında eyleme geçmem gerekmedi, bu nedenle, değiştirilmiş öğelere bir sınıf eklemek için handly load () işlevi için bir geri arama kullandım ve ardından tüm değiştirilmiş öğeleri birkaç saniyede bir setInterval zamanlayıcıyla güncelledim.

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

O zaman istediğiniz gibi halledebilirsiniz - örneğin

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

Html (veya herhangi bir) işlevine bir geri arama seçeneği ekleyebilirsiniz:

$.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");});

Demo burada.

Değişikliği bazı unsurlarda yaparsınız, unsur sizin yakalamanız gereken bir şey tarafından değişmeye zorlanmaz.

Bir olaydaki bir öğenin değişikliğini kontrol edecek bir pasaj yazdım.

Dolayısıyla, üçüncü taraf javascript kodu veya başka bir şey kullanıyorsanız ve tıkladığınızda bir şeyin göründüğünü veya değiştiğini bilmeniz gerekiyorsa, o zaman yapabilirsiniz.

Aşağıdaki ön bilgi için, bir düğmeyi tıkladıktan sonra bir tablo içeriğinin ne zaman değişeceğini bilmeniz gerektiğini varsayalım.

$('.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);
        });

Sözde Kod:

• Bir düğmeyi tıkladığınızda
• Değiştirmeyi beklediğiniz öğenin html'si yakalanır
• daha sonra öğenin html'sini sürekli kontrol ederiz
• html'nin farklı olduğunu bulduğumuzda kontrolü durdururuz

Bunu Mutasyon Olaylarını kullanarak başarabiliriz . Www.w3.org'a göre, mutasyon olay modülü, öznitelik ve metin değişiklikleri de dahil olmak üzere bir belgenin yapısındaki herhangi bir değişikliğin bildirimine izin vermek için tasarlanmıştır. Daha fazla detay için MUTASYON ETKİNLİKLERİ

Örneğin :

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

Mümkün değil, yani içeriğin değiştiğine inanıyorum, ancak bu kesinlikle x-browser değil

Arka planda çirkin bir zaman aralığı olmadan mümkün olmadığını söylemeliyim!