I'm trying to add a click event to a tab that's generated by a Telerik ASP.NET widget. I've lifted a snip of the generated HTML into a static page for the purposes of experimentation:
<HTML>
<HEAD>
<TITLE>sandpit</TITLE>
<SCRIPT TYPE="text/javascript" SRC="jquery-1.9.1.js"></SCRIPT>
<SCRIPT>
$(document).ready(function(){
var foo = $("span.rtsTxt");
var bar = foo.filter("[innerText='More']")
bar.on('click',function(){alert('click');});
alert('ready');
});
</SCRIPT>
</HEAD>
<BODY>
<ul>
<li class="rtsLI">
<a class="rtsLink rtsAfter">
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">Preferences</span>
</span>
</span>
</a>
</li>
<li class="rtsLI">
<a class="rtsLink rtsAfter">
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">More</span>
</span>
</span>
</a>
</li>
</ul>
</BODY>
</HTML>
Debugging reveals that foo contains two items as expected. However, I can't figure out the syntax for selected the second one where the value of innerText is "More".
The question is simply how do I express innerText == 'More' either in a filter expression as shown or directly in the selector string?
Best Answer
One more approach to select an element which will return an object is to use filter like this:
fiddle