Javascript 使用JQuery replaceWith（）替换后未触发事件？

场景

我将通过jQueryAjax调用获得一个页面，并显示为一个弹出窗口。我这样做的原因是页面也可以在没有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">&#215;</a>');
            $('#search-advanced').reveal({
                animation: 'fade', 
                closeOnBackgroundClick: false
            });
        });
    });

$（'search main a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（“#搜索高级”）.remove（）；
var target=$（this.attr（'href'）；
var res=$.get（目标，函数（数据）{
$（'body'）。追加（$（数据）。查找（'search advanced'）；
$（“#搜索高级”）.addClass（“行显示模式”）；
$（“#搜索高级”）
.css（'top'，80）
.css（'border-radius'，'5px'）
.css（'padding-left'，'0px'）
.css（'padding-right'，'0px'）；
$（“#搜索高级输入[name=“select_filter”]”）。删除（）；
$（'search advanced.custom.dropdown'）。在（'change'，function（）上{
$（“#搜索高级表单”）.trigger（'submit'）；
});                 
$（“#搜索高级表单”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var params=$（“#搜索高级形式”）.serialize（）；
$.get（目标、参数、函数（数据）{
//这就是我遇到的问题
//它第一次运行良好时，
//但这是第二次没有触发更改事件
$（'search advanced form'）。替换为（$（数据）。查找（'search advanced form'）；
$（“#搜索高级输入[name=“select_filter”]”）。删除（）；
console.log（$（数据）.find（'#search advanced.custom.dropdown'）；
});
});
$（“#搜索高级”）.append（'


尝试像这样绑定事件：

$(document).on('click', '#search-main a', function(ev){
    // your code
});

我不知道你为什么要首先销毁原始表单。如果你只需要重置它，可能有更好的方法

但是，考虑到您正在销毁表单及其处理程序，您可以将处理程序绑定到
#search advanced
元素，并使用
.on
上的事件委派签名

  // 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'));
    });
});

您似乎正在销毁事件处理程序绑定到的原始
表单。很自然，表单元素消失了，处理程序也消失了。您真的需要这样完全销毁表单吗？您是要用另一个表单替换它，还是只是试图重设它？为什么要将其标记为PHP？已删除。@TWickz:不，
live（）
不好。使用
.on
是正确的，但委托版本可能更好，这取决于最终需要什么。@amnotiam:live不推荐使用。是的。但“不好”我不太确定。不过，如果您使用的是较旧版本的jquery，jquery网站上的建议是使用.delegate（）为我工作，on（）没有：）@TWickz：也许“bad”有点强，但我认为最好避免使用不推荐的API以及文档范围的事件委派。方法
.on
基本上可以做
.live（）
可以做的一切，包括将所有处理程序绑定到
文档
.live（）
did。实际上，我正在做的是，通过更改下拉项提交表单，然后更改视图（上一个表单）正在使用适用于请求的其他数据呈现。如果我成功找到仅替换新数据的方法，则不一定需要销毁表单。请您建议我重置表单的正确方法。我知道
replaceway（）
会破坏处理程序，这就是为什么我问如何重新绑定？无论如何，我会尝试一下，谢谢。@thujeevan:试试看，让我知道。关于将输入元素设置为新数据，只需选择每个元素，并使用
.val（）
更新它。我使用
$（'search advanced form'）.html（$（数据）.find（'search advanced form'）.html（））
，因为这不会破坏表单和处理程序，
$（'search advanced'）.on（'change'，'custom.dropdown'，function（）{}
。谢谢你的代码在另一个地方帮助了我。对不起，试着理解我的问题。。无论如何我会尝试的。谢谢