在Ajax加载Btn单击设置Javascript变量
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>
相关文章:
- Gulp设置javascript对象
- 能够在指向本地环境的浏览器中设置JavaScript断点
- 设置javascript函数中文本框的值
- 没有通过ajax调用设置Javascript全局变量
- 设置Javascript倒计时计时器的初始值
- 如果为null,则设置javascript变量的值
- 如何在我用作参数的函数中设置Javascript中的本地变量
- 在 shopify 上设置JavaScript弹出窗口的样式
- 在 for 循环中设置 Javascript 变量
- 设置JavaScript变量以稍后检查定义
- 在Ruby Slim文件中设置Javascript类型
- 设置JavaScript数组
- 设置javascript对象多级属性的简单方法
- 如何正确设置 JavaScript 命名空间和类
- 在代码隐藏中从DataTable设置javascript数组
- 使用Set属性在JSP:UseBean中设置javascript变量值
- 如何设置javascript中引用的文档的URL
- MVC 5视图-设置Javascript变量
- 如何设置javascript闭包的上下文
- 设置javascript文件的版本.Java EE+Tomcat