用JQuery replaceWith()替换后，事件未触发吗? [英] Event not get triggered after replacing with JQuery replaceWith()?

问题描述

场景

我通过JQuery ajax调用获得了一个页面，并显示为弹出窗口.我这样做的原因是该页面也可以不使用javascript进行访问.该页面本身包含一些下拉列表和按钮.在禁用javascript的版本中，通过将选择的值传递给使用php的服务器和从中传递来的值来维护页面的状态.因此，我打算对javascript做同样的事情，在这种情况下，以前的html元素需要替换为ajax响应.我在网上进行了广泛的搜索，但是却束手无策.

I'm getting a page by JQuery ajax call, and show as a pop-up. The reason why i'm doing so is the page can be accessed without javascript also. The page itself contains some drop-down lists and buttons. In the javascript disabled version the state of the page maintained by passing the selected values to and from the server which uses php. Therefore i intended to do the same with the javascript and in such case the previous html elements need to be replaced with ajax response. I made an extensive search over the web, but helpless.

问题

替换后，元素丢失其事件数据，

After replacing, the elements losing their event data,

如何保留或重新绑定与它们相关的事件?

how to preserve or re-bind the events associated with them?

我一直试图实现的代码是

The code i have been trying to implement is

    $('#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
            });
        });
    });

我不确定这种方法是否优雅，任何解决的建议或其他方法都会非常感激.

I'm not sure about the elegance of this approach, any suggestion to solve or different approach will be very thankful.

我已经尝试了以下链接

• jQuery事件未触发
• replaceWith之后的jQuery加载事件
• 在替换后保持jQuery onChange

• jQuery event not triggered
• jQuery load-event after replaceWith
• Maintain jQuery onChange After a Replacewith

推荐答案

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

I'm not sure why you're destroying the original form in the first place. If you just need to reset it, there are probably better ways.

但是考虑到您要破坏表单及其处理程序，可以将处理程序绑定到#search-advanced元素，并使用.on的事件委托签名.

But given that you are destroying the form, and therefore its handlers, you could bind the handler to the #search-advanced element, and use the event delegation signature of .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'));
    });
});

这篇关于用JQuery replaceWith()替换后，事件未触发吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！