Question

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

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

在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 fire之后复制到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);  
});

Answer 1

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

$('input#completecall')在您拨打电话时可能没有任何内容，因为它尚未从服务器返回而尚未添加到页面中，因此您的$('input#completecall').on('click',注册为空。

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

所以你可以写代码如下：

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

以下是演示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

关于AJAX的事情是，JavaScript在AJAX调用完成之前不会等到执行它之前的代码。 E.g：

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

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

您需要使用AJAX调用的complete功能，以确保按下所需按钮。 E.g：

$.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/

在Ajax Load Btn上单击Set Javascript Variable

2 个答案: