单击处理程序在Jquery POST后不起作用
单击处理程序在Jquery POST后不起作用
提问于 2019-10-27 00:02:40
我有一个带有选择选项和表单的网页，当用户更改选择时，我的jquery脚本函数将动态执行ajax POST，以不同的表单(新表单元素)替换原始表单。
但是我注意到Click处理程序($(button).click()事件)在新生成的表单上不起作用。请在这方面提供帮助。
这是Jquery中的已知问题吗？
<select id=choice><option>....</select>
<div class=mytable>
<form id='dataform-10'>
.....
<button id="edit-10"></button>
</form>
<div>
<script>
$(function(){
$("#choice").change(function(){
$.get('/portal/go?id='+this.value, function(data, status){
//$(".mytable").hide();
$(".mytable").html(data);
$(".mytable").show();
});
});
});
</script>
<script>
$('[id^=edit]').on("click",function(e) {
e.preventDefault();
var num = this.id.slice(5);
var fdata = $('#dataform-'+num).serialize();
$.post('/portal/update', fdata, function(data, status){
alert(data);
});
});
</script>回答 3
Stack Overflow用户
回答已采纳
发布于 2019-10-27 01:58:34
正如@sh977218所指出的，click事件不起作用的原因是在事件处理程序的初始标记之后在DOM中添加了新元素。尝试如下所示：
<script>
function clickEventHandler(event) {
// code for click event
event.preventDefault();
var num = event.target.id.slice(5);
var fdata = $('#dataform-'+num).serialize();
$.post('/portal/update', fdata, function(data, status){
alert(data);
});
}
$('[id^=edit]').on("click", function(e){clickEventHandler(e);});
$("#choice").change(function(){
$.get('/portal/go?id='+this.value, function(data, status){
//$(".mytable").hide();
$(".mytable").html(data);
$(".mytable").show();
$('[id^=edit]').on("click", function(e){clickEventHandler(e);});
});
});
</script>Stack Overflow用户
发布于 2019-10-27 00:14:50
当你添加一些新的DOM时，你需要再次在它上面挂接事件。
Stack Overflow用户
发布于 2019-10-27 00:29:01
... $('[id^=edit]').on("click",function(e) { ...
应该是
... $(".mytable").on("click", "[id^=edit]", function(e) { ...
你试过这样做吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58572421
复制相关文章
相似问题
腾讯云开发者
