How can i attach to the click when a user presses "clear search input" in jQuery Mobile

Question

As you can see on this page jQuery mobile renders an "X" at the right of the entered text in an input search box. How can I attach to the click-event of that "X"?

Answer 1

$('.ui-input-clear').live('click', function(e){
    alert('click!');
});

Is a good starting point. I use live as the searchbox isn't necessarily in the page on load. This of course is nonspecific by using the class but if required can be made so.

Update: As of jQuery 1.7 .live is deprecated in favour of .on: http://api.jquery.com/on/

$('.ui-content').on('click', '.ui-input-clear', function(e){
    alert('click!');
});​

Answer 2

bind click to the whole thing and then determine what was clicked with event.target which holds the originally clicked element as the event bubbles up.

A simple if that checks for some classes should do.

Start from binding click and sniffing what's clicked:

$(theinput).click(function(e){
console.log(e.target);
});