Question

I have a basic jQuery selector question.

Let’s say I’m parsing JSON and generating a row of data for each item in my result set. On each item row, I want an action button. What is the best practice to script that button so its click action can reference the data specific to that row?

Starting with the block below, how do I generate a ‘Click Me’ button that when clicked will alert with its json data?

   $.getJSON(url,params,function(json){
    if(json.items){
        $.each(json.items, function(i, n){
            var item = json.items[i];

Answer 1

You could do this:

$.getJSON(url,params,function(json){
  if(json.items){
    $.each(json.items, function(idx, item){
      $("<button>Click Me</button>").click(function() {
        alert($(this).data("json");
      }).data("json", item).appendTo("body");
    });
  }
});