Question

我的页面中有以下标记

时间轴并使用了folling jquery代码

$(".timeline").click(function(){createtip(eventdata);});

function createtip(eventdata){ 

    $('<div class="tip"></div>').appendTo('body').html(html_content);
        positionTooltip(eventdata);        
    };

    function positiontip(eventdata){
        var PosX = eventdata.pageX;
        var PosY = eventdata.pageY;
        $('div.tip').css({'position': 'absolute', 'top': PosY, 'left': PosX});

，html_content是：

<input type="button" class="button" name="submit_tooltip_form" value="close"/>

在附加div标签后，我试图通过点击div标签内的按钮来关闭这个div标签。我不知道该怎么办，因为我是jquery的新手。

Answer 1

试试这个，

function createtip(eventdata){ 
        $('body').append('<div class="tip">'+html_content+'</div>');
        positionTooltip(eventdata);        
    };

Answer 2

尝试使用jquery .on()

$(".timeline").on('click',function(){
    createtip(eventdata);
});

Answer 3

试试这个，

$('input [name="submit_tooltip_form"]').live("click", function(){
    $(".tip").hide();
});

Answer 4

fiddle

向文档添加新内容时，系统会添加新内容，而不会添加任何事件处理程序，例如click()或on( 'click' )。这意味着您必须执行以下两项操作之一：

在添加事件后将事件绑定到新对象，如下所示：

$(newElement).on('click',  function () {
    $(this).closest('.tip').hide();
   // other stuff
});

或者，您可以将单击处理委托给父对象，父对象将自动处理新添加元素的事件，如下所示：

$('body').on( 'click', '.button', function () {
    $(this).closest('.tip').hide();
});

如果使用第二种方法，则无需担心将事件绑定到新对象。

注意：您可能想要删除提示而不是隐藏它们？在这种情况下，在上面的例子中用.remove()代替.hide()

click函数不能使用jquery附加到body的元素

4 个答案: