点击Ajax加载按钮时设置Javascript变量

Question

我在我的页面上通过两个日期加载一个Ajax查询，它显示了一个通话列表。

返回的数据中包括CallID、Name、Date和完成按钮。

在AJAX调用后，似乎无法让我的JavaScript在按钮单击时触发。

首先是我的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页面，我想点击“完成”按钮来更新该呼叫状态为已完成。

我之前是以类似的方式做的，但出于某些原因，我无法让我的JavaScript在按钮点击时触发。

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

- Dev.W

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/

- shanehoban

Answer 2

你需要使用事件委托来监听在注册操作之后添加的目标事件。

$('input#completecall') 在调用时可能什么也没有，因为它还没有从服务器返回并且还没有被添加到页面中，所以你的$('input#completecall').on('click', 注册的是空的。

你应该找到新添加元素的容器，并使用.on的委托形式来注册事件。

所以你可以像这样编写代码：

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

以下是一个演示：

$('#add').click(function() {
  if ($('#new').length === 0) {
    var div = $('<div>').text('New one').attr('id', 'new').appendTo('#calls');
  }
});

$('#new').on('click', function() {
  alert("I won't be triggered!");
});

$(document).on('click', '#new', function() {
  alert("I will be triggered!");
});

div {
  width: 70px;
  text-align: center;
  background-color: lightgray;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add">Add</div>
<div id="calls"></div>

- fuyushimoya