CODEWITHSUNDEEP
htmljquery-mobile
Espo
Espo

Reputation: 41929

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

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"?

Upvotes: 5

Views: 6987

Answers (3)

RolandoCC
RolandoCC

Reputation: 878

Tested with jQuery 1.9 and jQuery Mobile 1.3:

I Have the input inside a form so, suscribed the event to an 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!');
    })

Upvotes: 1

amcc
amcc

Reputation: 2678

$('.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!');
});​

Upvotes: 12

naugtur
naugtur

Reputation: 16915

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

Upvotes: 2

Related Questions