CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Undermine2k
Undermine2k

Reputation: 1491

JQuery Tooltip Not Allowing Button to be Clicked

I'm using JQuery tooltip plugin and I'm trying to simulate a input button on hover, which it does successfully but I cannot click on said button. It's like it never exists in the DOM, or maybe it does but then is instantly removed. I'm not sure why the click is not binding.

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');

});

Upvotes: 0

Views: 130

Answers (4)

Felix
Felix

Reputation: 38102

You're using event delegation wrongly here since .container is not the child of your input with class card_info_popup, so you need to use:

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

instead of:

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

Updated Fiddle

Upvotes: 2

James Wong
James Wong

Reputation: 4619

You have to delegate on('click'); to a static element then bind it to the dynamically generated popup.

I have updated your fiddle: http://jsfiddle.net/BgDxs/130/

Here is the updated code: 

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

Upvotes: 1

Rakesh Kumar
Rakesh Kumar

Reputation: 2853

Try this.

You have to use event delegation to enable the click event on the newly created tooltip button http://learn.jquery.com/events/event-delegation/

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

});

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

change:

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

});

to

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

Updated Fiddle

Upvotes: 2

Related Questions