为什么在使用AJAX加载HTML后，jQuery的change函数无法正常工作？

Question

为什么在使用AJAX加载HTML后，jQuery的change函数无法正常工作？

javascriptjqueryajax

14

我加载了一个表单，并通过来自PHP文件的AJAX动态填充了一个

- ahhchuu

可能是动态创建元素上的事件绑定？的重复问题。 - showdev

3个回答

2

我认为你正在绑定到以下行中的元素：

$('#ve_categoryNo').change(function() { ...

该元素尚不存在于DOM中，因此事件无法绑定。

尝试使用.live函数：

$('#ve_categoryNo').live('change', function() { ... });

在尝试绑定事件之前，请确保您的DOM元素存在。

- Walter Stabosz

1

使用.on()语法优于.live()，并且性能更好，特别是如果绑定到与问题元素更接近的位置。 - Mark Schultheiss

请查看我最新的答案示例，了解更紧密绑定的示例以及有关性能的一些注释。我的理解是live始终绑定到文档。 - Mark Schultheiss

-1

从文档准备好开始工作，改变了Ajax功能

$(document).change(function(){
  $("#next").click(function() {
     var questionid = $('#question').val();         
     var assementid = $('#assement').val();         
     var userid     = $('#user').val();         
     if($('.ansradio').is(':checked')) { 
        var answer = $('input[name=ans]:checked', '#questionajax').val();
        $.ajax({
           type: "POST",
           url: "answer/",
           data: "q_id="+questionid+"&a_id="+assementid+"&answer="+answer+"&user_id="+userid,
           success: function(html){
              $("#questionajax").html(html).show();
           }
        });
     }
     else{
        alert("Please answer the questions");
     }     
  });

});

- Vinoth Smart

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark Schultheiss · Accepted Answer

修改这个：

$('#ve_categoryNo').change(function() {

到

$(document).on('change', '#ve_categoryNo', function() {

编辑3：在更仔细地检查您的代码后，这将表现得最好：

   $('#ve_categoryNo_td').on('change', '#ve_categoryNo', function() {

因为它与所讨论的元素最接近，所以应将ajax调用放在ready脚本中。

发生这种情况的原因是在实例化时没有任何DOM可绑定。使用这种方式的 .on 将其绑定到文档上。如果您有另一个包装它的“固定”元素，则最好使用该元素进行绑定，以此替代“document”，因为它可能会表现得更好。

编辑：请注意，您也可以在注入元素作为ajax调用完成的一部分后添加更改事件管理，但如果您这样做多次，则应首先解除绑定。

编辑2：由于存在问题/评论：

根据文档：http://api.jquery.com/on/

在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery都必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部路径上的每个元素进行比较。为了获得最佳性能，请尽可能接近目标元素在文档位置处附加委派事件。避免在大型文档上过度使用 document 或 document.body 以进行委派事件。