场景
我通过 JQuery ajax 调用获取页面,并显示为弹出窗口。我这样做的原因是页面也可以在没有 javascript 的情况下访问。该页面本身包含一些下拉列表和按钮。在 javascript 禁用版本中,页面状态通过将选定值传入和传出使用 php 的服务器来维护。因此我打算对 javascript 做同样的事情,在这种情况下,之前的 html
元素需要用 ajax 响应替换。我在网上进行了广泛的搜索,但无能为力。
问题
替换后,元素丢失了它们的事件数据,
how to preserve or re-bind the events associated with them?
我一直在尝试实现的代码是
$('#search-main a').on('click', function(e){
e.preventDefault();
$('#search-advanced').remove();
var target = $(this).attr('href');
var res = $.get(target, function(data){
$('body').append($(data).find('#search-advanced'));
$('#search-advanced').addClass('row reveal-modal');
$('#search-advanced')
.css('top', 80)
.css('border-radius' , '5px')
.css('padding-left' , '0px')
.css('padding-right' , '0px');
$('#search-advanced input[name="select_filter"]').remove();
$('#search-advanced .custom.dropdown').on('change', function(){
$('#search-advanced form').trigger('submit');
});
$('#search-advanced form').on('submit', function(e){
e.preventDefault();
var params = $('#search-advanced form').serialize();
$.get(target, params, function(data){
// This is where I'm encountering the problem
// The first time it works fine,
// but for the second time the change event not get triggered
$('#search-advanced form').replaceWith($(data).find('#search-advanced form'));
$('#search-advanced input[name="select_filter"]').remove();
console.log($(data).find('#search-advanced .custom.dropdown'));
});
});
$('#search-advanced').append('<a class="close-reveal-modal">×</a>');
$('#search-advanced').reveal({
animation: 'fade',
closeOnBackgroundClick: false
});
});
});
我不确定这种方法是否优雅,任何解决问题的建议或不同的方法都将非常感谢。
我已经尝试过以下链接
最佳答案
我不确定您一开始为什么要破坏原始形式。如果您只需要重置它,可能有更好的方法。
但鉴于您要销毁表单及其处理程序,您可以将处理程序绑定(bind)到 #search-advanced
元素,并使用 .on< 的事件委托(delegate)签名
.
// v--event is bound here v--and will trigger on the form element
$('#search-advanced').on('submit', "form", function(e){
e.preventDefault();
var params = $('#search-advanced form').serialize();
$.get(target, params, function(data){
$('#search-advanced form').replaceWith($(data).find('#search-advanced form'));
$('#search-advanced input[name="select_filter"]').remove();
console.log($(data).find('#search-advanced .custom.dropdown'));
});
});
关于javascript - 用 JQuery replaceWith() 替换后事件没有被触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11828018/