在Ajax加载Btn单击设置Javascript变量 - On Ajax Load Btn Click Set Javascript Variable

On Ajax Load Btn Click Set Javascript Variable

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

在返回的数据中有CallID, Name, Date, Button to Complete。

我似乎不能让我的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>

Second my AJAX调用data:

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

关于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/

您必须使用事件委托来侦听在注册操作之后添加的目标事件。

当您调用它时，

$('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>