Question

我有一个国家/地区下拉，在更改时我会返回一个div，其中包含相同的国家/地区，其中包含其他字段。

我使用以下代码替换整个div。但在完成div的替换后，on change事件将停止进一步工作。我该如何解决这个问题？

    $("#country).on("change", function(){
        var str = $("#myform").serialize();
        $.ajax({
            type: 'POST',
            data:str,
            url:'../changeme',
            success: function(data){

                debugger;

                var html = $.parseHTML(data);
                var arrSelector = $(html).find('div[data-refresh=true]');
                var i;
                for(i=0;i<arrSelector.length;i++)
                {

                    $('#' + arrSelector[i].id).replaceWith($($(data)).find('#' + arrSelector[i].id));
                }
            },
            done:function(data){

            },
            error:function(data){

            },
            complete:function(data){

            }
        });
    });
},

Answer 1

通过正常方式不会通过动态创建的html调用事件。请改用以下内容，即使在替换包含国家/地区下拉列表的div后也应该调用它：

$(document).on('change', '#country', function() { ... });

Answer 2

你有几个选择

不要更换整个元素，只需更换它的内容即可。当您替换元素时，它的事件绑定将丢失

-OR -

委托事件处理程序

 $(document).on('change',  '#country', function(){
    /* same code you already have*/
  })

Answer 3

尝试将整个onChange事件代码放在init函数中，并在每次更换div时调用此函数。

function initOnChange() {
  $("#country).on("change", function(){ 
    ...
    success: function(data){
      ...
      initOnChange();
      ...
    }
    ...
  });
}

事件在Ajax Response Jquery之后未触发

3 个答案: