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

Question

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

http://jsfiddle.net/BgDxs/126/

$("[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

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

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

代替:

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

Updated Fiddle