Создание динамического содержимого div с помощью jquery

Question

Я ищу, чтобы поместить div на мой сайт, где контент изменяется на основе какой ссылки clicked без обновления. Содержимое, которое нужно добавить, происходит от MySQL database и помещено в JSON. Моя проблема заключается в том, что я не могу получить данные JSON для отображения при нажатии ссылок.

Вот сценарий, я использую:

$(document).ready(function() { 
    $.getJSON("jsondata.php",rightSideData); 
    function rightSideData(data) { 
     for(var i=0; i<data.length;i++) { 
     $("#changetext"+data[i].id).click(function() { 
      $("#rightside").html("<h1>" + data[i].title + "</h1><p />" + data[i].content); 
     }); 
     } 
    } 
}); 

Это div элемент, который должен измениться:

<div class='rightside' id='rightside'>Test</div> 

Ссылки построены таким образом:

echo "<a id='changetext" . $row['id'] . "'> "; 
echo "<div class='tile'>"; 
echo "<h2>Tile</h2></div></a>"; 

Я тестировал различные элементы, и они отлично работают (изменение divs cont с жестко закодированными данными, отображающими данные JSON), но мне трудно понять, почему комбинированная вещь не работает.

Answer 1

Объектов does'nt имеет длину, используйте $.each итерировать его вместо этого, если это не на самом деле массива, содержащих объекты:

$(document).ready(function() { 
    $.getJSON("jsondata.php",rightSideData); 

    function rightSideData(data) { 
     $.each(data, function(i, d) { 
     $("#changetext" + d.id).on('click', function() { 
      var h1 = $('<h1 />', {text : d.title}), 
       p = $('<p />', {text : d.content}); 
      $("#rightside").html(h1.add(p)); 
     }); 
     }); 
    } 
}); 

Answer 2

Проблема заключается в том, что i var будет data.length в конце цикла, и это то, что увидит обработчик кликов.