javascript - 在 Ajax 加载按钮上单击设置 Javascript 变量

Question

我在显示调用列表的页面上通过两个日期加载 ajax 查询。

在返回的数据中有 CallID、姓名、日期、完成按钮。

我似乎无法让我的 javascript 在 AJAX 调用后点击按钮时触发。

首先是我的 HTML:

    <input type="text" class="form-control date-picker" id="startdate" value="<?php echo date("m/d/Y");?>">

    <input type="text" class="form-control date-picker" id="enddate" value="<?php echo date("m/d/Y");?>">

<input type"text" id="rep" value="WOLRAB">

    <div id="calls"></div>

我的第二个 AJAX 调用数据:

$('input#daterange').on('click', function() {

        var start = $('input#startdate').val();
        var end = $('input#enddate').val();
        var rep = $('input#rep').val();

        $.post('assets/ajax/repscalls.php', {startdate: start,enddate: end, rep:rep}, function(data) {
            $('#calls').html(data)
        });

});

第三，我的 php 文件执行结果(请注意，我只复制了在 ajax 触发后显示在 html 页面上的按钮。

echo "<td><input type='hidden' id='callid' value='" . $row['callid'] . " '><input type='submit' id='completecall' value='Complete'></td>";

现在，一旦它被输出到 HTML 页面，我就想点击 COMPLETE 按钮，它会更新状态为完成的调用。

我以类似的方式执行此操作，但出于某种原因，我无法让我的 javascript 在单击按钮时触发。

$('input#completecall').on('click', function() {
        var completeid = $('input#callid').val();
        alert(completeid);  
});

Answer 1

关于 AJAX 的事情是 JavaScript 不会等到 AJAX 调用完成后才执行它之前的代码。例如:

#some ajax call takes 10 seconds here`
var x = 2 + 2;
#ajax call complete

x 将被立即评估，而不是等待 AJAX 调用。

您需要使用 AJAX 调用的 complete 函数来确保按您的意愿点击按钮。例如:

$.ajax({
  method: "GET",
  url: "test.php",
  data: "whatever",
  success: function(data){
     // do whatever 
  },
  complete: function(){ 
    // do your click
  }
});

complete 总是被调用，无论是否发生错误/成功

---

此处有关 jQuery AJAX 调用的信息:http://api.jquery.com/jquery.ajax/