Sandra Sandra - 11 months ago 45
Javascript Question

How to find jquery selector for p:inputText clearIcon(X button in end)

Please look this image and cross button I have a search form, that has input field using primefaces

<p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" />

As you can see, I am using composite:attribute. I want an action attached to this cross button(X button appears on the right side of input field).

I used firebug to see the cross button id. it shows something like this:

<a class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" href="#"></a>

So I wrote a jquery code to test and show alert

$(".ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all").click(function(){
alert("The cross button was clicked.");

And it fails :(


If you're selecting multiple classes with jQuery you can't do:

$(".ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all")

Spaces in a jQuery selector look for matches in descendants. That selector would be searching for something like this:

<div class='ui-input-clear'>
  <div class='ui-btn'>
    <div class='ui-icon-delete'>
      <div class='ui-btn-icon-notext'>
        <div class='ui-corner-all'> //Match here

You need to separate the classes with a . so jQuery will look for each individual class.

        alert("The cross button was clicked.");