WordPress jquery not working properly in Chrome

I had this strange jQuery issue that appeared in Wordpress 3.2.1. I am developing a WordPress plugin. I use Chrome to do my debugging. I usually include developer tools to try some jQuery functions before putting them into code. But for this particular combination, I had a problem with exactly the ID selector and the HTML Object function.

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 

I tried disabling all extensions on my Chrome, but the problem remains. On another page (like Stackoverflow.com) jQuery works as expected in the console.

EDIT: The class selector works correctly in the console, but html() still returns null

EDIT: Sorry, that was my mistake. I have a “-” in id, which is causing the problem. After replacing the underscore, it works already. I notice this when it works with another wordpress plugin, but not mine.

+4
source share
1 answer

If you really need access to the html code inside the element id, try my solution:

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

I tested this on:

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

and the result of the warning:

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

I tested that in FF, Chrome and what is called IE, and everything works fine!

Do not ask me about the white spaces where they went, now your problem: P: P: P

I hope this is useful to you :)

+1
source

All Articles