JQuery $ ("#" + x) does not work, but document.getElementById (x) works

Question

Problem

I am trying to change the internal value of an HTML element. I have not used jQuery very much, and I'm still new to many aspects of its functionality.

$('a.toggle-download').live('click', function (event) { $.post("/ajax/toggle-download", { code: $(this).data("document"), prev_value: $(this).data("val") }) .done(function(data) { var json = data, obj = JSON && JSON.parse(json) || $.parseJSON(json); if(obj['return'] == 1){ //document.getElementById("p_" + obj['code']).innerHTML = 'some text'; $("#p_" + obj['code']).html('some text'); } }); event.preventDefault(); }); 

I tried both lines, first jQuery one through $("#p_" + obj['code']) , which didn't work, and then through document.getElementById("p_" + obj['code']) , which works fine .

I seem to have missed something obvious here, but still I don't understand why jquery does not work in this case!

Question

Why does plain old javascript work correctly when jQuery is not working?

Additional Information

1) jQuery itself works and it loads correctly. There are no conflicts: the ajax call is sent successfully and the response is received correctly,

2) The received identifier exists and is unique

3) I am not fond of the jQuery html () method , but I followed the documentation and should work the way I used it

System Information

This problem occurs when using Chrome 27.0.1453.116 m. I have not tested it with other versions or other browsers, but I am pretty sure that the jQuery problem, not the browser problem. Also, I am using php 5.3 for apache, but this information should not be relevant to this problem.

If I missed some information, you need to better understand my problem, please let me know in the comments and I will try to answer you as soon as I can. Also, please forgive my poor grammar, but I am not a native speaker of English.

Comments replies

as requested, here is an example ajax answer: {"return":1,"code":"5.43.321"}

command console.log($("#p_" + obj['code']).length) gives the value "0"

Answer 1

If your identifier is p_x.xx.xxx , then $('#' + id) means: an element with id p_x and classes xx and xxx .

Or replace the dots \\. before using the string as id ore using the approach suggested by @dystroy.

Answer 2

If you want to select an element using an arbitrary string as an identifier, you better avoid using the '#'+yourstring : in many cases this may make the selector invalid for jQuery, even if your string is a valid HTML5 identifier.

If your identifier contains a period, jQuery will interpret it as the beginning of the class.

Prefer this:

 $(document.getElementById(yourstring)) 

Answer 3

 $("[id='p_"+code+"']") 

This will also work. It contains periods in the id string.

Answer 4

It really works for me ...

 <div id="p_testdiv1"></div> var obj = { code : 'testdiv1' } console.log(obj.code); //document.getElementById("p_" + obj.code).innerHTML = "test"; // Also works $("#p_" + obj.code).html("test1"); // Displays "test1" in the div 

http://jsfiddle.net/hZ4yz/