jQuery в Wordpress работает не так, как ожидалось в Chrome

#jquery #wordpress

Вопрос:

У меня возникла эта странная проблема с jQuery, которая поставляется с WordPress 3.2.1. Я разрабатываю плагин WordPress. Я использую Chrome для отладки. Обычно я включаю инструменты разработчика, чтобы опробовать некоторые функции jQuery, прежде чем вводить их в код. Но для этой конкретной комбинации у меня возникли проблемы, а именно с селектором идентификаторов и различными функциями объектов HTML.

 jQuery('#id_of_html_element') //This will just return [] in the console

//If I put this in the plugin, it will run and show [object Object]
alert(jQuery('#id_of_html_element'));


//The following shows "null" but in fact I have html inside
alert(jQuery('#id_of_html_element').html());

//And this works as expected in the console
document.getElementById('id_of_html_element').innerHTML

Я попытался отключить все расширения в моем Chrome, но проблема остается. На другой странице (например Stackoverflow.com ), jQuery работает в консоли, как и ожидалось.

РЕДАКТИРОВАТЬ: селектор классов работает правильно в консоли, но html() все равно возвращает null

РЕДАКТИРОВАТЬ: Извините, это была моя ошибка. У меня был «-» в идентификаторе, что вызывает проблему. После замены его подчеркиванием он уже работает. Я замечаю это, когда он работает на другом плагине WordPress, но не на моем.

1. вы продолжаете говорить Chrome. Работает ли это в Firefox? Я сомневаюсь, что это проблема Chrome. Скорее всего, порядок загрузки WordPress. У меня была похожая проблема не так давно. Просто поместите

2. На данный момент у меня установлен только Chrome. <head> невозможно, так как это плагин WP, а не тема.

3. ах, да, извините за это, для смеха и смеха, вы пытались поместить это в свою голову только для тестирования. Тогда вы узнаете, проблема ли это с браузером или проблема с порядком загрузки WordPress

4. np, я только что попробовал с IE9, та же проблема.

5. Вызывается ли это после DOM ready? jQuery (документ). ready(function(){ // получение селектора html() теперь, когда DOM-дерево построено. });

Ответ №1:

Если вы действительно хотите получить доступ к html-коду внутри идентификатора элемента, попробуйте мое решение:

 var v1 = $('<div>').append($("#id_of_html_element").find("*").clone()).remove().html();
alert(v1);

Я проверил это на :

 <div id="id_of_html_element">
        <a href="#">Text</a>
        <br/><a href="#">Another Text</a>
</div>

и результат предупреждения был :

<a href="#">Text</a><br><a href="#">Another Text</a>

Я протестировал это на FF, Chrome и той штуке, которая называется IE, и все, казалось, работало хорошо!

Не спрашивайте меня о пробелах, куда они делись, теперь это ваша проблема: P: P: P

Надеюсь, это полезно для вас 🙂

1. Образец кода, который у меня есть, обычно работает, он просто не работает на моей странице плагина внутри WordPress

2. Поскольку никто больше не ответил, и я обнаружил проблему, я просто отмечу ваш как ответ