从appendTo内容内部调用操作

invoke actions from inside an appendTo content

本文关键字：调用 操作 内部 appendTo      更新时间：2023-09-26

我有一个div元素附加到body元素

$('<div class="tooltip"></div>').appendTo('body');

并给它赋值一些HTML 

$('div.tooltip').html('<a class="closeme">close me</a>');

我希望当用户点击close me链接时附加的div会被移除
所以我做了

$('a.closeme').click(function(){
    $('div.tooltip').remove();
});

但是我没有得到任何响应，即使我尝试一个简单的

$('a.closeme').click(function(){
    alert('hi');
})

我没有得到任何回应。我怀疑它的行为是这样的，因为我使用了appenTo方法。如果有人能告诉我如何从appentTo元素内部调用auction，我将不胜感激

使用on()方法将事件附加到当前存在或将来会出现的元素:

$('parentElementSelector').on('click','.tooltip',
    function(){
        alert('the tooltip was clicked!');
    });

在您的例子中，由于您要附加到body元素:

$('body').on('click','a.closeme',
    function(){
        $(this).closest('.tooltip').remove();
    });
参考:

  • closest() .
  • on() .
  • remove() .

您可以这样构建它(工作示例)…

// create your new elements
$div = $('<div class="tooltip"></div>');
$a = $('<a class="closeme">close me</a>');
// attach the event to the created element
$a.click(function() {
    alert("hi");
});
// combine them
$div.html($a);
// add them to the page
$div.appendTo('body');

你的代码似乎对我来说工作得很好，看看这个。

你用$(document).ready(function() {});

构建它的最短方法可能是这样的:

$('<div class="tooltip"><a class="closeme">close me</a></div>').appendTo('body').on('click', function() {$(this).remove()});

你需要添加一个实时事件的关闭功能，简单的点击功能将不起作用试试这个

  $('.closeme').live('click',function(){
     $('div.tooltip').remove();
  });
相关文章：