在jquery之后，看不到insert元素

after jquery insert - element isnot seen

本文关键字：insert 元素 看不到 jquery 之后      更新时间：2023-09-26

我有这个问题：
我正在通过jquery插入某些html。在插入的html中，我有一个绑定了函数的类。这个函数没有被调用，我感觉js还没有看到插入的html。

我的插入代码。

$(function(){
  $('#einf').on('click', function(){
    $('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr');
  });
});

您可以假设，插入效果良好。这是我的绑定函数：

$(function(){
  $('.ame').on('click', function(){
     alert('test');
  }); 
});

我用已经存在的具有相同类ame的元素进行了测试，它正在使用它。感谢您的帮助和指导

您必须在添加的元素上再次运行click-bind。也许这样的东西会起作用：

$('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr').find('.ame').on('click', function(){
    alert('test');
});

尝试使用事件委派：http://jsfiddle.net/xehu9/

$('#einf').on('click', '.ame', function(e){ //<-----pass it here.
    e.stopPropagation(); //<---------stop the event bubbling here.
    alert('test');
});

之所以会发生这种情况，是因为您正试图在页面准备就绪时实现对dom中不存在的elem的点击。

来自文档：

事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on（）.时存在于页面上

尝试.live()而不是.on()

http://jsfiddle.net/ThobiasN/Pt3db/

  $(function(){ 
    $('#einf').on('click', function(){ alert ('some');
      $('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr');
    });
    $('.ame').live('click', function(){
       alert('test');
    }); 
  });

您不能引用通常创建的元素，因为当javascript运行时，它不在DOM中，我建议您使用TEMPLATES而不是dinamic html内容。

然而，如果您想遵循这种方法，jquery允许连接元素方法：

$(function(){
$('#einf').on('click', function(){
$('<tr><td><a class="ame">delete</a></td></td></tr>')
.insertAfter('#append_tr')
.on('click',function(){
 alert('test');
});
});
});
相关文章：