JQuery unrecognized expression on Ajax response

Question

I have this JQuery Ajax Form.

$(\'#modal-body-sign-in\').on(\'submit\', \'#sign-in\', function(e) {
        e.preventDefault();
        var data = $(this).se         


        

Answer 1

I've got exactly the same problem since I've upgraded to jQuery 1.9.x. actually the simple $(data) generates the crash, nothing else. I had this problem a few times before (without previous versions than 1.9), but I don't remember its issue...

anyway it is a totally blocking trouble... still looking for a reason for that and a fix.

EDIT:

If I'm doing that :

$.ajax('/',function(html){
  html = $('<div></div>').append(html);
  $(html);
});

It works fine. If I do :

$.ajax('/',function(html){
  $(html);
});

It gives me a (through the FF error console) :

Erreur : Error: Syntax error, unrecognized expression: <div id="...">(...)
jquery.min.js - line : 4

EDIT 2:

Ok found the solution... after a long search and tests : http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring

So I now do something like :

$.ajax('/',function(html){
  $($.parseHTML(html));
});

Anyway jQuery is always confusing my first element with the one, but at least it works

Answer 2

If you are using jQuery1.9, the problem may lie in the content being loaded. There is a new update which requires that the first character in the response be a < [AKA the less than symbol]. Even whitespace will cause this to break and throw the dreaded "Uncaught Error: Syntax error, unrecognized expression:" error.

I'd recommend checking this before using the suggested workaround above. Its not a bug its a security effort.

http://jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring