Erstellen dynamischer div Inhalt mit jquery

Question

Ich bin auf der Suche nach einem div auf meiner Website, wo der Inhalt basierend auf dem Link clicked ohne Aktualisierung ändert. Der Inhalt kommt von einer MySQL database und es wird in JSON eingefügt. Mein Problem ist, dass ich die JSON-Daten nicht anzeigen kann, wenn ich auf die Links klicke.

Hier ist das Skript Ich verwende:

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

Dies ist das div Element, das zu ändern hat:

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

Die Verbindungen aufgebaut sind, auf diese Weise:

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

Ich habe die verschiedenen Elemente getestet und sie funktionieren gut (Ändern der divs cont mit fest codierten Daten, Anzeige der JSON-Daten), aber ich habe eine harte Zeit herauszufinden, warum die kombinierte Sache nicht funktioniert.

Answer 1

Objekte does'nt eine Länge haben, verwenden Sie $.each es stattdessen zu wiederholen, es sei denn, es tatsächlich ein Array mit Objekten ist:

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

Das Problem ist, dass i var wird data.length am Ende der Schleife sein und das ist, was der Click-Handler sehen wird.