Easy jQuery Function Call Doesn't Work

Question

My page is;

  <div class="new-nav">
  </div>

My jQuery code is;

var div1 = "      
<div class=\"metro-nav-block nav-block-orange\">\n                    
    <a data-original-title=\"\" href=\"NotesMonitoring.aspx\">\n                        
        <i class=\"icon-phone\"></i>\n                        
        <div class=\"info\">
            <span data-bind=\"text: JSON.MonthMyCall\"></span> / 
            <span data-bind=\"text: JSON.MonthCallGoal\"></span>
        </div>                  \n                        
        <div class=\"status\">Benim Aradığım</div>\n                    
    </a>\n                
</div>"
var dv = $(div1).appendTo(".new-nav");

But when I open page, it gives error like;

Uncaught Error: Syntax error, unrecognized expression:

at Function.st.error (jquery-1.9.1.min.js:3)
at ft (jquery-1.9.1.min.js:3)
at wt (jquery-1.9.1.min.js:3)
at Function.st [as find] (jquery-1.9.1.min.js:3)
at init.find (jquery-1.9.1.min.js:3)
at init (jquery-1.9.1.min.js:2)
at b (jquery-1.9.1.min.js:2)

I tried just $(div1) and it gave same error.

But when I try with jQuery 1.8.3 it works. Is it problem of jQuery 1.9.1?

How can I solve this?

Your new update replaced one problem (mis-nested quotes) with a completely different problem (multi-line strings don't work in current javascript. You can get them in ES6 using template literals, but that uses a different syntax.) — Daniel Beck, Jun 22 '17 at 15:12
When I try with jQuery 1.8.3 it works. But I have to use 1.9.1 and I get errors with that version. — Gyepesto, Jun 22 '17 at 15:17
As written here, it shouldn't work in any version of jQuery, because the way you define `div1` is a syntax error before you even invoke jQuery in the next line. Did you just format it wrong in the question, and you've really got a single-line string (with embedded `\n`) in your actual code? — Daniel Beck, Jun 22 '17 at 15:22
Yes, exactly what I mean is what you said. But you can see, it works on jQuery 1.8.3 unfortunately. — Gyepesto, Jun 22 '17 at 15:29
Reformatting that variable definition to a single line works fine for me in any version of jQuery. Leaving it as a multiline results in a syntax error (unsurprisingly.) I'm not sure what's going on for you here -- my best guess, based on the different typefaces in your screenshots, is that you're using different test environments when comparing jQuery versions, and are doing something different in each of them that makes one work and the other not. — Daniel Beck, Jun 22 '17 at 15:36
I'm voting to close this question as off-topic because the rewrite of the question has made the existing answers obsolete, and the new version of the question still apparently doesn't accurately represent the code the asker is trying to debug. — Daniel Beck, Jun 22 '17 at 15:37
Thank you, you are wrong. https://stackoverflow.com/questions/14347611/jquery-client-side-template-syntax-error-unrecognized-expression — Gyepesto, Jun 22 '17 at 15:58
Heh, that's interesting! I didn't see it when I tested your code because in formatting it to remove the syntax error, I also ended up removing the leading newline that triggered the buggy jquery 1.9 behavior. (I still don't know how you're getting the multiline string in the first place, the syntax shown in the question will not work.) — Daniel Beck, Jun 22 '17 at 16:29

score 1 · Answer 1 · answered Jun 22 '17 at 13:46

You are not properly handling escape characters. When you have "" for properties, it actually closes and opens again which is incomplete. Either write it as

var div1 = '<a data-original-title="" href="NotesMonitoring.aspx">Notes</a>'

OR

var div1 = "<a data-original-title=\"\" href=\"NotesMonitoring.aspx\">Notes</a>"

Working snippet

var div1 = "<a data-original-title=\"\" href=\"NotesMonitoring.aspx \">Notes</a>";
var dv = $(div1).appendTo(".new-nav");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-nav">
</div>

But my data comes from DB and it stored at db as you said. I edited my code. — Gyepesto, Jun 22 '17 at 15:05

score 0 · Answer 2 · answered Jun 22 '17 at 13:46

0

Quotes problem and a missing ;

Change :

var div1 = "<a data-original-title="" href="NotesMonitoring.aspx">Notes</a>"

To :

var div1 = "<a data-original-title='' href='NotesMonitoring.aspx'>Notes</a>";

answered Jun 22 '17 at 13:46

Hamza Abdaoui

1,814
2
17
28

score 0 · Answer 3 · answered Jun 22 '17 at 13:46

You are nesting double quotes in double quotes. Use single quotes on the inside or escape the nested double quotes with \".

var div1 = "<a data-original-title='' href='NotesMonitoring.aspx'>Notes</a>"
var dv = $(div1).appendTo(".new-nav");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-nav">
  </div>

Easy jQuery Function Call Doesn't Work

3 Answers3