Tạo nội dung div động với jquery

Question

Tôi đang tìm cách đặt div trên trang web của mình nơi nội dung thay đổi dựa trên liên kết là clicked mà không cần làm mới. Các nội dung để đặt ở đó xuất phát từ một MySQL database và nó được đặt trong JSON. Vấn đề của tôi là tôi không thể lấy dữ liệu JSON để hiển thị khi nhấp vào liên kết.

Dưới đây là kịch bản tôi đang sử dụng:

$(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); 
     }); 
     } 
    } 
}); 

Đây là yếu tố div mà đã thay đổi:

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

Các liên kết được xây dựng theo cách này:

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

Tôi đã thử nghiệm các yếu tố khác nhau và chúng hoạt động tốt (thay đổi các div tiếp theo ent với dữ liệu hardcoded, hiển thị dữ liệu JSON), nhưng tôi đang gặp khó khăn trong việc tìm ra lý do tại sao kết hợp không hoạt động.

Answer 1

Đối tượng does'nt có một chiều dài, sử dụng $.each để lặp nó thay vào đó, trừ khi nó thực sự là một mảng chứa các đối tượng:

$(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

Vấn đề là i var sẽ là data.length ở cuối vòng lặp và đó là điều mà trình xử lý nhấp chuột sẽ thấy.