Quotes breaking code in javascript onclick event using Jquery append

Question

I am trying to pass two arguments in the on click javascript function. I need to enclose the the arguments in quotes. when i enclose it in single quotes it breaks the quote that starts from image and when i use double it breaks the quotes in front of javascript. how do i enclose it that it doesn't break my code?

$("#Div").append('<img id ="myImage" src ="/images/myimage.png"  onclick="javascript:myfunction('addnew',$("#field").val())"/> Error.')

Anthony Atkinson · Accepted Answer · 2012-06-01 15:17:30Z

2

You will have to escape the quotes with a backslash, as such:

$("#Div").append('<img id ="myImage" src ="/images/myimage.png"  onclick="javascript:myfunction(\'addnew\',$("#field").val())"/> Error.')

answered Jun 1, 2012 at 15:17

Anthony Atkinson

3,2583 gold badges22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Esailija · Accepted Answer · 2012-06-01 15:26:23Z

1

You could do:

$("#Div").append( $( "<img>", {

    id: "myImage",

    src: "/images/myimage.png",

    click: function() {
        myfunction( 'addnew', $("#field").val() );
    }

}), " Error." );

answered Jun 1, 2012 at 15:26

Esailija

140k24 gold badges280 silver badges328 bronze badges

4 Comments

user829982 Over a year ago

I am trying to use this code on a span tag and the click event does not work . my code : $("#error").append($("<span>",{ id:"edit", title: action, click:function(){ Edit(action,$('#field').val() ); } }), errMsg);

Esailija Over a year ago

@user829982 it's likely the Edit part that's not working, put click: function(){console.log("test");} to test if the click event is not working.

user829982 Over a year ago

the console does not add test when i use the span tag only when i use the img tag. it does not seem that the edit function is not working

Esailija Over a year ago

@user829982 did you realize that errMsg is not inside the span, but is a separate text node? So clicking that text is not same as clicking the span. Try $("<span>", {text: errMsg}) to make the text go inside the span..

Mathew Thompson · Accepted Answer · 2012-06-01 15:17:16Z

1

Try this, you need to escape the apostrophe with \:

$("#Div").append('<img id ="myImage" src ="/images/myimage.png" onclick="javascript:myfunction(\'addnew\',$("#field").val())"/> Error.')

answered Jun 1, 2012 at 15:17

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Comments

Barry Kaye · Accepted Answer · 2012-06-01 15:18:02Z

0

Escape the single quotes around \'addnew\':

$("#Div").append('<img id ="myImage" src ="/images/myimage.png"  onclick="javascript:myfunction(\'addnew\',$("#field").val())"/> Error.')

answered Jun 1, 2012 at 15:18

Barry Kaye

7,7696 gold badges46 silver badges65 bronze badges

Collectives™ on Stack Overflow

Quotes breaking code in javascript onclick event using Jquery append

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related