Question

Okay, so I’m populating an accordion with JSON data. The only way I know how to do this is by appending HTML to the div. Here’s my code:

$.getJSON('/industry_tree.json', function(data) {
    $("#accordion").accordion();
    for (i in data) {
        acc_html += '<h3><a href="#">'+data[i].data+'</a></h3>';
        acc_html += '<div>';
        for (j in data[i].children) {
            acc_html += '<li>'+data[i].children[j].data+'</li>';                        
        }
        acc_html += '</div>';
    }                   
    console.log(acc_html);
    $("#accordion").append(acc_html);   
    $("#accordion").accordion("destroy").accordion({autoHeight: false});        
});

I want the <li> to execute some sort of JS everytime it’s clicked. The problem is, I’m not sure how to do that if I’m adding it via an append.

Answer 1

Once it is appended, you can manipulate it the same way you would anything else on the page.

for instance:

$("#accordion li").click(function(){...});