Question

我的链接如下：

<a id="link" href="hospitaldetails.php?id=1">Click Here</a>

单击链接将使用Ajax在同一页面上更新div：

<!--Div containing ajax response of hospital details-->
<div id="container"></div>

jQuery ajax脚本如下：

  <script type="text/javascript">
 //getting details of hospital through ajax request and displayed on <div> with id container
    $("#link").click(function(e) {
      e.preventDefault(); // <-------stop the default behavior here.
      var id = this.href.split('=').pop(); // extract the id here
      $.ajax({
        type: "get",
        url: "hospitaldetails.php",
        data: {id:id}, // now pass it here
        success: function(data) {
          $('#container').html(data);
        }
      });
    });
    </script>

一切正常，但页面上有多个不同ID的链接，如：

href="hospitaldetails.php?id=1"
href="hospitaldetails.php?id=2"

点击第一个链接将正确更新容器div，但第二个链接将在新窗口中打开，其中url为hospitaldetails.php？id = 2。

为什么不用新id的内容更新相同的div？上面的代码出了什么问题？

Answer 1

确保您的ID是唯一的：

<a id="link1" href="hospitaldetails.php?id=1">Click Here</a>
<a id="link2" href="hospitaldetails.php?id=2">Click Here</a>

但是，如果为AJAX侦听器定义选择器，则可能更容易。例如：

<a class="ajaxlink" href="hospitaldetails.php?id=1">Click Here</a>

让你的听众引用这个选择器：

$(".ajaxlink").click(function(e) {

div中只有一个链接以ajax刷新

1 个答案: