Question

I’ve set up this (updated) JSFiddle demonstrating what I am trying to do, but basically I think this is a situation of event bubbling. I am trying to position (in a tool tip) a button that when clicked on will change the value of the input that the tool tip is triggering on. The problem I’m seeing is the button ‘Click’ event is never firing. Any ideas on how to make this work?

Here is the simple code (this is using jQuery 1.7.2 and Tipsy 1.0.0a):

<input type="text" title="<button class='Action'>Add Balance</button>" name="Balance"/>
<button class='Action'>Add Other Balance</button>

$(document).ready(function() {
    $('input[name="Balance"]').tipsy({
        trigger: 'focus',
        gravity: 'n',
        html: true
    });
    $('button.Action').click(function() {
        $('input[name = "Balance"]').val($(this).html());
    });
});

Answer 1

The issue is that the click on the button element in the tooltip is causing the input to emit a ‘focusout’ event that’s being caught by tipsy and removing it – and its children – from the DOM before the click event can bubble up.

Here’s a demo of it working, but only because the removal parent tipsy element is delayed:

HTML:

<input title="<button class='action'>Add Balance</button>" name="balance"/>
<button class='action'>Add Other Balance</button>

JS:

$(document).ready(function() {
    $(this).on('click', '.action', function() {
        $('input[name=balance]').val($(this).html());
    });

    $('input[name=balance]').tipsy({
        trigger: 'focus',
        gravity: 'n',
        html: true,
        delayOut: 1000 // Delay allows 'click' to fire
    });
});​

(I’ve taken the liberty of normalising your classnames)