事件不使用jQuery replaceWith更换()之后被触发?(Event not get tr

2019-09-20 21:02发布

场景

我得到的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的事件不触发
  • replaceWith后jQuery的负载事件
  • 维持jQuery的一个的onChange后Replacewith

Answer 1:

我不知道为什么你破坏了原来的形式摆在首位。 如果你只需要重置,有可能是更好的方法。

但考虑到你正在破坏形式,因此,其处理程序,你可以绑定处理程序到#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'));
    });
});


Answer 2:

尝试结合这样的事件:

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


文章来源: Event not get triggered after replacing with JQuery replaceWith()?