Question

我正在使用JQuery工具提示插件，我正在尝试模拟悬停时的输入按钮，它成功但我无法点击所述按钮。它就像它从未存在于DOM中，或者它可能会存在，但随后会被立即删除。我不确定为什么点击没有约束力。

$("[title]").bind("mouseleave", function (event) {
        var evt = event ? event : window.event;

        var target = $(evt.srcElement || evt.target);

        evt.stopImmediatePropagation();

        var fixed = setTimeout(
            function () {
                target.tooltip("close");
            }, 200);

        $(".ui-tooltip").hover(
                    function () { clearTimeout(fixed); },
                    function () { target.tooltip("close"); }
                );
    });
$("[title]").tooltip({
        content: "...wait...",
        position: { my: "left top", at: "right center" },
        open: function (event, ui) {            
            var _elem = ui.tooltip;

            window.setTimeout(
                function() {                                            
                        var html = "<input type='button' value='Card Information' class='card_info_popup'></input>";

                        _elem.find(".ui-tooltip-content").html(html);
                    },
                200);
        },
        track: false,
        show: 100
    });


$('.card_info_popup').on('click', '.container', function() {
    alert('click');

});

Answer 1

变化：

$('.card_info_popup').on('click', '.container', function() {
    alert('click');

});

到

$(document).on('click', '.card_info_popup', function() {
    alert('click');    
});

更新了Fiddle

Answer 2

你在这里错误地使用了事件委托，因为.container不是你输入类card_info_popup的孩子，所以你需要使用：

$('body').on('click', '.card_info_popup', function() {
    alert('click');
});

而不是：

$('.card_info_popup').on('click', '.container', function() {
    alert('click');
});

<强> Updated Fiddle

Answer 3

试试这个。

您必须使用事件委派在新创建的工具提示按钮上启用click事件 http://learn.jquery.com/events/event-delegation/

$(document).on('click', '.card_info_popup', function() {
    alert('click');

});

Answer 4

您必须将on('click');委托给静态元素，然后将其绑定到动态生成的弹出窗口。

我更新了你的小提琴：http://jsfiddle.net/BgDxs/130/

以下是更新后的代码：

$('body').on('click', '.ui-tooltip input.card_info_popup', function() {
    alert('click');
});

JQuery工具提示不允许单击按钮

4 个答案: