在写前端时,需要根据判断是否满足相应条件,动态添加一个button。
最初我将button的点击事件用jQuery直接写在function函数内,js代码框架如下
<!--...代表无关代码-->
<script type="text/javascript">
$(function () {
<!--我在datetimepicker的changeDate的异步加载函数中使用了动态添加button-->
$('.form_datetime').datetimepicker().on('changeDate', function(ev){
...
$.ajax({
...
success: function (ret) {
...
if(...){
...
}
else if(...){
...
<!--添加button-->
var buttonhtml = "<button type=\"button\" class=\"btn btn-info\" id=\"paybutton\">发放劳务</button>"; $("#paybuttoncontainer").html(buttonhtml);
}
}
})
});
<!--click函数在function内,与添加button的代码隔离-->
$("#paybutton").click(function(){
...
});
});
</script>
这样写点击button并没有反应,
(提醒大家,在chrome下定义的button一定要加type="button"
,不然会默认为submit类型按钮,点击按钮直接重新提交表单,页面刷新,不知道谷歌为什么会这样设置默认值)
查阅资料了解到,应该是click事件添加时,button还没完全加载,所以事件找不到button,就没有注册这个事件。
所以改变click事件位置到添加button的代码里
<!--添加button-->
var buttonhtml = "<button type=\"button\" class=\"btn btn-info\" id=\"paybutton\">发放劳务</button>";
$("#paybuttoncontainer").html(buttonhtml);
$("#paybutton").click(function(){
...
});
点击可以调用click方法啦!