7

In my js function,I create a div and a link ,when click the link,I will pass a parameter the another js funcion?What's wrong with my code?

js function1

 //pass a json:the browser show wrong:SyntaxError: missing ] after element list
 //passJson([object Object])
 var dataItem=getDataItem();//a json object which has title and name property
 var divStr="<div><a style='cursor: pointer' onclick='passJson(" + dataItem +")'><span title='spantitle'><i class='icon-mouse'></i></span></a>;</div>";

So I try to add the "[]" to the function,but it still show wrong.

js function2

 //pass a json:the browser show wrong:SyntaxError: missing ] after element list
 //passJson([object Object])
 var dataItem=getDataItem();// a json object which has title and name property
 var divStr="<div><a style='cursor: pointer' onclick='passJson([" + dataItem +"])'><span title='spantitle' ><i class='icon-mouse'></i></span></a>;</div>";
5
  • When do you get the Syntax error ? After your 'passJson' did JSON.parse ?
    – sebilasse
    Apr 13, 2014 at 9:14
  • 1
    Seirsously, why are trying to turn data into a string to pass it to a function by assigning a string to onclick? Geez, not a recommended design pattern in ANY way. If you want to associate some data with the object via the HTML, then make it a data-xxx attribute on the HTML object and then fetch that attribute from your event handler.
    – jfriend00
    Apr 13, 2014 at 9:22
  • 1
    You can't have multiline strings like that. Either escape the newline character, or make each line a string and concatenate them.
    – Zirak
    Apr 13, 2014 at 9:26
  • In the other function,I also want to use the json object,both of it's title and name.One way is to pass two parameter(dataItem.title,dataItem.name),the other way is to pass the json.I choose last way,but it seems wrong.In fact,it is only one line,but the format can not allow me to write one line above.
    – flower
    Apr 13, 2014 at 9:38
  • I have edited the question again.
    – flower
    Apr 13, 2014 at 9:49

2 Answers 2

8

Typically, you don't call it a JSON object. You just call it a JavaScript object.

The way your code is, you don't need to do string concatenation. You can just do onclick='passJson(dataItem)' as in

http://jsfiddle.net/6LzCA/5/

function passJson(obj) {
    console.log(obj);
}

var dataItem={ title: "hello", name: "snoopy" }; //a json object which has title and name property

var divStr="<div id='foo'><a style='cursor: pointer' onclick='passJson(dataItem)'><span title='spantitle'><i class='icon-mouse'></i>hmmm</span></a>;</div>";

$("body").append(divStr);

and it will work when you click on the link "hmmm".

You probably want to add the markup separately, and then bind a click handler to the link, because typically, we would like to go with the approach of unobtrusive JavaScript.

1
  • Thank you for your service.Because the button and div is created by js function dynamically and it is really easily declarated in the function.
    – flower
    Apr 13, 2014 at 9:58
4
function passJson(data) {
  console.log(data); 
}
function getDataItem (){
 return {'title':'mytitle','name':'helloName'}; 
}
$(document).ready(function(){
  var dataItem=getDataItem();// a json object which has title and name property
  dataItem = JSON.stringify(dataItem);
  var divStr="<div><a style='cursor: pointer' onclick='passJson("+dataItem+")'>       hello clik me<span title='spantitle'><i class='icon-mouse'> </i> </span></a>;</div>";
 $('body').html($(divStr));
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.