Comment définir un attribut onClick qui chargerait un contenu dynamique ?

Question

Ce code est censé ajouter un événement onClick à chacun des éléments suivants a de sorte qu'en cliquant sur l'élément, le contenu de la page est chargé dynamiquement dans un DIV.

Je suis arrivé jusqu'ici - il ajoutera l'événement onClick, mais comment puis-je charger le contenu dynamique ?

$(document.body).ready(function () {
  $("li.cat-item a").each(function (i) {
      this.setAttribute('onclick','alert("[load content dynamically into #preview]")');
  });
});

Merci.

Answer 1

$(document.body).ready(function () {
  $("li.cat-item a").click(function (e) {
      $('#this-is-your-target-div').load(this.href);
      e.preventDefault();
  });
});

Consultez la documentation sur les fonctions ajax de jQuery ici : http://api.jquery.com/category/ajax/ .

Answer 2

$(document).ready(function () {
  $('li.cat-item a').bind('click', function (e) {
    $('#preview').load($(this).attr('href'));

    e.preventDefault();
  });
});

Il existe un grand nombre de fonctions AJAX dans jQuery : http://api.jquery.com/category/ajax

Answer 3

$("li.cat-item a").click(function() {
    $.get($(this).attr('href'), function(data) {
        $("#preview").html(data);
    });
});

Est-ce qu'une requête AJAX utilisant $.get qui est plus facile à lire, selon moi, que la version href de l'élément cliqué, et place les données récupérées dans le fichier div preview .

Answer 4

Utilisez $('div.container').html(htmlString);

donde htmlString est le code html du contenu que vous souhaitez placer à l'intérieur de l'objet div avec la classe container