How to set an onClick attribute that would load dynamic content?

Question

This code is suppose to add an onClick event to each of the a elements, so that clicking on the element would load the content of the page dynamically into a DIV.

Now, I got this far - It will add the onClick event, but how can I load the dynamic content?

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

Thank you.

Answer 1

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

where htmlString is the html code of the content you want to place inside the div with class container

Answer 2

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

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

There is an extensive amount of AJAX functions in jQuery: http://api.jquery.com/category/ajax

Answer 3

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

Does an AJAX request using $.get which is more easier to read imho to the href attribute of the clicked element, and puts the retrieved data into the div preview.

Answer 4

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

See the documentation for jQuery ajax functions here: http://api.jquery.com/category/ajax/.