JQuery не может получить доступ к определенным частям документа

Question

JQuery не может получить доступ к определенным частям документа

0

Я создал документ jQuery, однако он не может захватить какой-либо элемент внутри только одного типа элементов, ".media_container"

Следующий код ведет себя следующим образом:

jQuery(document).ready(function($) {

    alert('alive');

    $('h1').css('background', 'pink');

    $('.media_container').hover(function(){
        $(this).css('display', 'none');
    });
});

'alive' предупрежден, поэтому я знаю, что файл читается правильно.
Все заголовки, кроме заголовков внутри .media_container становятся розовыми.
Ничего не происходит, когда я .media_containers над любым .media_containers

У меня была такая же проблема с другим файлом jQuery на той же странице php. Я попробовал.mouseover и.mouseenter с тем же неответчиком.

Вопрос. С jQuery некоторые части документа недоступны с помощью $(), а недоступные части находятся только в одном типе элемента.media_container - любая идея относительно того, почему это так?

Livvy Jeffs 20 фев. 2014, в 08:36

Источник

3

Можете ли вы предоставить HTML?
Satpal 20 фев. 2014, в 06:52
2

.media_containers или .media_container ?? покажи html
mithunsatheesh 20 фев. 2014, в 06:53
0

если .media_container находится внутри iframe, jquery не может получить к нему доступ.
Vibin TV 20 фев. 2014, в 06:58
1

Смотрите, это работает! jsfiddle.net/WL6Pq
Bhojendra Rauniyar 20 фев. 2014, в 07:00

Показать ещё 2 комментария

Теги:

jquery

1 ответ

Ещё вопросы

.media_containers или .media_container ?? покажи html
если .media_container находится внутри iframe, jquery не может получить к нему доступ.
Смотрите, это работает! jsfiddle.net/WL6Pq

Livvy Jeffs · Accepted Answer · 2014-02-20T06-06-00.000Z

Я боролся с этим в течение нескольких дней, и, конечно, причина и решение кажутся легкими в ретроспективе. :)

Причина: jQuery действительно тонка относительно порядка и времени

jQuery (document).ready() запускается, когда все элементы записываются в DOM.
Мы использовали ajax для печати '.media_container на странице

В тот момент, когда скрипт запущен, страница выглядит следующим образом:

<html>
<head>
<script>
    window.onload(){
        loadContent(); //which uses ajax to inject php into the html
    }
</script>
</head>
<body>

      //empty

      <script>
          jQuery(document).ready(function(){
              $('.media_container').someFunction();
          });
      </script>
</body>
</html>

$ (document).ready() происходит до window.onload()

Поэтому, несмотря на то, что сценарий jQuery находится в конце body, он запускается до loadContent() в head который запускается window.onload().

Дальнейшая ясность, последовательность событий:

1. Browser reads html/php document, top down.
2. Browser reads the script in the 'head' and waits for 'window.onload()'
3. Simultaneously, it loads the 'html' elements into the DOM.
4. It reaches the end of the document and reads and loads a jQuery script and waits for 'jQuery(document).ready()'
5. Since it already basically done with loading the DOM, the jQuery script runs <i>before</i> the window.onload() script runs.

Решение: <img onload>

Даже запуск loadContent() на document.ready() вместо window.onload() не работает, потому что к тому времени, когда он запускает ajax и использует php для вставки элементов в HTML, скрипт jQuery уже запущен.

Поэтому я сделал две вещи, чтобы ускорить код:

Я loadContent() на document.ready()
В конце каждого ajax/php pull я добавляю media_container с visibility:hidden и <img src='spaceholder.jpg' onload='attachFunctions()'>, где attachFunctions() определяется в файле сценария, запускаемом в head и проблема решены!

Новый код:

<html>
    <head>
        <script>
            $(document).ready(function(){
              loadContent(); //which uses ajax to inject php into the html
            });
            attachFunctions(){
              $('.media_container').someFunction();
            }
        </script>
    </head>
    <body>
        <div class='media_container'></div>
        <div class='media_container'></div>
        <div class='media_container'></div>
        <div class='media_container' style='visibility:hidden'>
            <img src='spaceholder.jpg' onload='attachFunctions()'>
        </div>
    </body>
</html>