Appending on javascript with onclick

Question

I'm appending some html codes on javascript. I'm also binding an onclick to it. The problem is, I'm getting a javascript error each time I press onclick. I'm passing a string to the function onclick. Here's a clearer view.

var propertyTypeDdlValues = "";

propertyTypeDdlValues += "<li onclick='selectPropertyType('Condominium/Studio')'>Condominium/Studio</li>"; 

$("#propertyTypeDdl").html(propertyTypeDdlValues);

This is my selectPropertyType

function selectPropertyType(cattype){
    $("#propertyType").text(cattype);
    $("#hdnPropertyType").val(cattype);
}

I keep on having this error:

Uncaught SyntaxError: Unexpected token }

I think the problem is how I wrap strings around (" "). What made me say this? Because when I try to just use a simple function like this:

propertyTypeDdlValues += "<li onclick='displayMessage()'>Condominium/Studio</li>"; 

function displayMessage(){
    alert("Message");
}

It goes through the function and the alert message is being displayed.

Any ideas? Thanks!

Try adding a \ before and after the quotes of Condominium/Studio. — MD Sayem Ahmed
– MD Sayem Ahmed, Commented Aug 23, 2013 at 6:31
@iBlue no need to use txtspk hre. You've got 300 characters per comment - more than enough — John Dvorak
– John Dvorak, Commented Aug 23, 2013 at 6:31

speti43 · Accepted Answer · 2013-08-23 06:42:06Z

1

Here is a solution:

JSFiddle

$(function () {  

     $("#propertyTypeDdl").append("<li onclick=
      selectPropertyType('Condominium/Studio')>Condominium/Studio</li>");

     $("#propertyTypeDdl").append("<li onclick=
      'displayMessage()'>Condominium/Studio</li>");
});

function selectPropertyType(cattype) {
    $("#propertyType").val(cattype);
}

function displayMessage() {
    alert("Message");
}

answered Aug 23, 2013 at 6:42

speti43

3,0622 gold badges22 silver badges26 bronze badges

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

1 Comment

Luke Villanueva Over a year ago

After reading all answers. This one is the most efficient and effective. It's simple and straightforward. I can't believe I just have to remove " ' " wrapping around onclick. Thanks!

ckv · Accepted Answer · 2013-08-23 06:31:05Z

0

One way would be to store that string in a variable and passing that into the function. But I guess some one else will give a better answer.

answered Aug 23, 2013 at 6:31

ckv

10.9k23 gold badges103 silver badges154 bronze badges

Comments

Naveen Kumar Alone · Accepted Answer · 2013-08-23 06:36:50Z

0

Modify your propertyTypeDdlValues to

propertyTypeDdlValues += 
   "<li onclick='selectPropertyType('\'Condominium/Studio\'')'>
      Condominium/Studio
   </li>"

edited Aug 23, 2013 at 6:36

answered Aug 23, 2013 at 6:31

Naveen Kumar Alone

7,6985 gold badges40 silver badges59 bronze badges

Comments

Sergiu Paraschiv · Accepted Answer · 2013-08-23 06:36:55Z

0

You are using jQuery. So why not:

foreach(thing in listOfThings) {
    var li = $('<li>' + thig.name + '</li>');
    li.click(function(e) {
        selectPropertyType($(this).html());
    });

    $("#propertyTypeDdl").append(li);
}

It's a lot cleaner.

Friendly advice: never ever use HTML on/whatever events again :)

answered Aug 23, 2013 at 6:36

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

Comments

John Dvorak · Accepted Answer · 2013-08-23 06:38:43Z

Your original string

"<li onclick='selectPropertyType('Condominium/Studio')'>Condominium/Studio</li>"

Gets parsed as this HTML:

<li onclick='selectPropertyType('Condominium/Studio')'>Condominium/Studio</li>

The onclick atrribute ends just after the left bracket, leading to invalid javascript. Since you have three levels of nesting, you'll need to escape your quotes:

"<li onclick='selectPropertyType(\'Condominium/Studio\')'>Condominium/Studio</li>"

or

"<li onclick='selectPropertyType(\"Condominium/Studio\")'>Condominium/Studio</li>"

but it is better to avoid pieces of javascript code as strings (and, since you're using jQuery, avoid onclick attributes altogether), and create an element and set its click handler to a function. This will also avoid the need to nest string literals:

var $li = $("<li>").text('Condominium/Studio').click(function(){
  selectPropertyType('Condominium/Studio')
});

$propertyTypeDdlValues = $propertyTypeDdlValues.add($li)

Collectives™ on Stack Overflow

Appending on javascript with onclick

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related