How to call jQuery AJAX on click event?

I made a jQuery model.

Am trying to populate data using AJAX inside that model.

I am getting an id and using that I want to populate dat开发者_运维百科a using AJAX.

How should I call AJAX on click event?

Is there any other event when the model is opened or loaded?

The model is just the showing and hiding of div.

Simply using:

JS:

$(document).ready(function(){
  $('a.pop').click(function() { 
    var popID = $(this).attr('rel');
    $.get('content.php', { ref:popID }, function(data) {
       $(popID+'Container').html(data);
       $(popID).dialog();
       alert('Load was performed.');
    });
    return false; // prevent default
  });
});

HTML:

<div id="example" class="flora" title="This is my title">
    I'm in a dialog!
    <div id="exampleContainer"></div>
</div>
<a href="#" id="clickingEvent" class="pop" rel="example">click to launch</a>

It is not tested, but as I see it, it should work...

You almost have it, you need to prevent the default action which is to follow the href in the link, so add either event.preventDefault() or return false, like this:

$('a.pop').click(function(e) {                     //add e param
  var popID = $(this).attr('rel'),
      popURL = $(this).attr('href');
  $.get("content.php", { ref:id}, function(data) { //did you mean popID here?
    alert("Data Loaded: "+data ); 
  });
  e.preventDefault(); //or return false;           //prevent default action
});