SORU
25 Aralık 2012, Salı

Neden getelementbyıd gibi bir WordPress kullanmak ya da bir DOM öğesi yöntem bulamaz mı?

document.getElementById, $("#id") ya da başka bir yöntem DOM / jQuery seçici için olası nedenleri öğeleri bulmak nedir?

CEVAP
3 Ocak 2012, Salı

Bulmaya çalıştığınız öğe betiği çalıştırdığınızda DOM değildi.

DOM-reliant senaryonu pozisyonu onun davranışı üzerinde derin bir etkisi olabilir. Belge yukarıdan aşağıya doğru ayrıştırılır. Elemanları DOM eklenir ve komut karşılaştı onlar gibi yürütülür.Bu emri konular anlamına gelir.Genellikle, bir komut, bu öğelerin henüz DOM eklenen olmamıştır çünkü daha sonra biçimlendirme görünen öğeleri bulamıyorum.

Biçimlendirme işlemi başarılı: <div> süre script2 bulmak için başarısız düşünün

<!-- Results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script id="script1">
  console.log("script1: %o", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script id="script2">
  console.log("script2: %o", document.getElementById("test")); // <div class="test" ...
</script>

Ne yapmalıyım? Bir kaç seçenek var:

Seçenek 1: komut Taşıyın

Senaryonu daha sadece kapanış gövde etiketinden önce sayfayı aşağı taşıyın. Bu şekilde düzenlenen belgenin geri kalanı komut yürütülmeden önce ayrıştırılır:

<body>
  <a class="test">test</a>
  <!-- Results pane console output; see http://meta.stackexchange.com/a/242491 -->
  <script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(".test").click(function() {
      console.log("clicked: %o", this);
    });
  </script>
</body><!-- closing body tag -->

Not: genellikle best practice sayılır altındaki Yerleştirerek komut.

Seçenek 2: ready() jQuery

DOM tamamen ayrıştırıldı kadar senaryonu erteleme, ready() kullanarak:

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $(".test").click(function() {
      console.log("clicked: %o", this);
    });
  });
</script>
<a class="test">test</a>

Sadece DOMContentLoaded window.onload bağlamak olabilir ama her biri kendi uyarılar vardır. not: bir WordPress kullanmak ready() hibrid bir çözüm sunar.

Seçenek 3: Olay Heyet

Delegated events daha sonra belge için eklenen alt öğelerini olayları işleyebilir avantajı var.

Bir eleman bir olay (bubbling bir olay oluyor ve hiçbir şey onun yayılmasını durdurur şartıyla) harekete geçiren, o elemanın soy her ebeveyn de olayı alır. Bizim onlar kadar onun soyundan gelen kabarcık gibi mevcut eleman ve örnek olaylar için bir işleyici eklemek için izin verir. Torunları daha sonra katma olaylar işleyicisi üst bekliyorum yollayın. Tek yapmamız gereken, istenen elemanı tarafından geçirilen olup olmadığını görmek için olay kontrol edin ve eğer öyleyse, bizim kod çalıştırılır.

bir WordPress kullanmak on() bizim için bu mantığı gerçekleştirir. Biz sadece bir olay adı, istenen torunu için bir seçici ve bir olay işleyicisi sağlar:

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).on("click", ".test", function(e) {
    console.log("clicked: %o",  this);
  });
</script>
<a class="test">test</a>

Not: Tipik olarak, bu model yük-zaman var olmamış olan elemanları için ayrılmıştıryaişleyicileri büyük miktarda ekleme önlemek için. Özellikle senin durumundaSeçenek 1veSeçenek 2daha uygun. Ayrıca değer document (demonstrasyon amaçlı) için bir işleyici ekledim ederken, en yakın güvenilir atası seçmeniz gerektiğine dikkat çekti.

4. seçenek: defer öznitelik

<script> defer özniteliğini kullanın.

[defer, Boolean özniteliği] komut belge ayrıştırıldı sonra yürütülecek amaçlı bir tarayıcı için belirtmek için ayarlanır.

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="http://antisanity.net/js/defer-script-test.js" defer></script>
<a class="test">test</a>

Not: Bu kesinliklegörünüyorsihirli bir değnek gibiamaönemli uyarılar farkında olmak
1. defer sadece harici komut dosyaları için kullanılabilir, örneğin: ** 35 bir nitelik.
2. 45*, yani* unutmayın: IE < uygulama; 10 arabası

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
JavascriptJqueryDom

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • TheFlashCentre

    TheFlashCent

    22 Mayıs 2008
  • Tracy Hairston

    Tracy Hairst

    22 Mayıs 2009
  • TVNorge

    TVNorge

    5 EKİM 2006

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR