事件在替换为 JQuery 替换与(）后未触发

Event not get triggered after replacing with JQuery replaceWith()?

本文关键字：替换 JQuery 事件      更新时间：2023-09-26

场景

我正在通过 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">&#215;</a>');
            $('#search-advanced').reveal({
                animation: 'fade', 
                closeOnBackgroundClick: false
            });
        });
    });

我不确定这种方法的优雅程度，任何解决的建议或不同的方法都将非常感激。

我已经尝试了以下链接

  • 未触发 jQuery 事件
  • 替换后的 jQuery 加载事件与
  • 在替换后维护 jQuery onChange

我不确定你为什么要首先破坏原始形式。如果您只需要重置它，可能有更好的方法。

但是，鉴于您正在销毁表单及其处理程序，您可以将处理程序绑定到 #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'));
    });
});

尝试像这样绑定事件：

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