How can I pin a click when the user clicks "clear login for search" in jQuery Mobile

Question

As you can see on this page, jQuery mobile displays an "X" to the right of the entered text in the input field. How can I bind the click event to this "X"?

Answer 1

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

Good starting point. I use livebecause the search is not necessarily located on the page when loading. This, of course, is not specific using the class, but you can do so if necessary.

Update: In jQuery 1.7 .livedeprecated in favor .on: http://api.jquery.com/on/

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

Answer 2

click , , event.target, , .

, .

, :

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

Answer 3

Tested with jQuery 1.9 and jQuery Mobile 1.3 :

I have an input inside the form, so it wrote the event to the element inside it:

   <form id="frmBusqueda" action="frmBusqueda">                              
                            <input name="txtBusqueda" id="txtBusqueda" placeholder="Nombre de producto"
                                value="" type="search" data-clear-btn="false" onkeyup="activarFiltro();">
                </form>


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