如何在点击事件上调用jQuery AJAX?

时间:2010-08-31 15:25:04

标签: jquery jquery-ui

我制作了一个jQuery模型。

我试图在该模型中使用AJAX填充数据。

我正在使用我想要使用AJAX填充数据。

如何在点击事件上调用AJAX?

打开或加载模型时是否还有其他事件?

该模型只是div的显示和隐藏。

2 个答案:

答案 0 :(得分:10)

只需使用:

<强> 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>

它没有经过测试,但正如我所见,它应该有效......

答案 1 :(得分:4)

您几乎拥有它,您需要阻止默认操作跟随链接中的href,因此请添加event.preventDefault()return false,如下所示:

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