Javascript Events Not Bubbling Up When Using Text Box Watermark

Question

I'm trying to implement a simple watermark on a text box that disappears when the text box gains focus. I found this jQuery plugin that appeared to work great:

http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

The watermark worked just as advertised with this code:

<script type="text/javascript" src="/includes/_jQuery/_Library/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="/includes/_jQuery/_plugs/_hint/jquery.hint.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("input[title!=]").hint();
    });
</script>

<table>
    <tr>
        <td><input type="text" title="Blah" /></td>
    </tr>
</table>

However, when adding an alert to the click event of the table, I found that the event doesn't bubble up when you click on the portion of the text box that has text. However it bubbles up just fine when you click on the part of the text box without text. Here is the jQuery code that I used to create the alert:

        $("table").click(function() {
            alert("blah");
        });

Does anybody have any idea why the event doesn't bubble up when part of the text box is clicked, but not the other?

Answer 1

Does anybody have any idea why the event doesn't bubble up when part of the text box is clicked

It seems to be a Firefox-specific bug affecting both text inputs and textareas. You can reproduce it with just a few lines of code, it's not jQuery-related or to do with the plugin:

<form onclick="alert('hello')">
    <input type="text" value="hello!" onfocus="this.value=''">
</form>

(Although I think the plugin does have some fairly significant problems. It forgets to use ‘var’ on local variables, letting them leak out to global scope. This makes multiple ‘.blur’ elements on the same page fail. Plus ‘empty’ values will still be submitted to the form as the title string, and you can't distinguish ‘real’ values typed by the user that match the title string.)

The event only fails to bubble when the input's value is changed in the focus event. Speculatively, my guess is that Firefox is internally recognising that the click() occurred on text inside the input, and expecting to bubble that event up each of the text's ancestors. But when the click event on the immediate parent causes onfocus to fire, that function is removing the text from its parent. Now there's nothing for the click event to have occurred on, no parent chain to bubble through.