javascript - jquery链接标签href与onclick需要两次点击才能加载ajax

Question

我正在编写一个ajax页面，当触发jquery选择器id时，它通过onclick传递参数并执行$.getJSON，然后返回div上的数据。它可以工作，但需要单击两次才能加载内容!它应该只需单击一下即可加载!任何帮助，将不胜感激。代码如下:

function services(theid) {

$('#open').on('click', function(){


   $.getJSON('process_serv.php',{thevar: theid}, function(data){

    $('.services').html(data.name + "-" +  data.charge);
   });
 });


  }

<小时/>

<a href="#"onclick="services('<?php echo $id?>'); return false"       
id="open" >hi</a> 
<div class="services">
</div>
<div class="times">
</div>
<div class="details">

<?php
$con = new mysqli("localhost", "root", "root", "labookin");

if(isset($_GET['thevar'])){

$id = $_GET['thevar'];

$query = "SELECT * FROM services WHERE bizid='$id'";

$the = $con->query($query);

$row = $the->fetch_assoc();

echo json_encode($row);


}
 ?>

Answer 1

您将在第一次单击时附加单击处理程序，然后在第二次单击时运行它。将您的 JS 代码更改为:

function services(theid) {
    $.getJSON('process_serv.php',{thevar: theid}, function(data){
        $('.services').html(data.name + "-" +  data.charge);
    });
}