场景
我得到的jQuery Ajax调用页面,并显示为弹出。 为什么我这样做的原因是网页可以在无javascript环境也进行访问。 页面本身包含一些下拉列表和按钮。 在禁用JavaScript版本的页面的状态由所选择的值传送到和从使用PHP服务器维护。 因此,我打算做同样使用JavaScript,在这种情况下,以前的html
元素需要使用Ajax响应来代替。 我做了网页,但无奈广泛的搜索。
问题
更换后,失去他们的事件数据的元素,
如何保存或重新绑定与之相关的事件?
我一直在努力实现的代码
$('#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
});
});
});
我不知道这种方法的风采,任何建议解决或不同的方法会很感激。
我已经尝试以下链接
- jQuery的事件不触发
- replaceWith后jQuery的负载事件
- 维持jQuery的一个的onChange后Replacewith