Question

This is probably a very common question, but I was unable to find an answer myself;

All my list elements call the function setQuery like this

onClick="admin_stats.setQuery(this);"

rather than [hardcode] add this to every list element, is there a way to simply have it run when a list element is clicked?

I’m not very familiar with jQuery Live or binding/unbinding, but I think they would play a role here?

Before I reinvent a rather square-looking wheel I thought I might ask =)

---

edit: my list elements look like

<ul>
    <li id="usersPerMonth" onClick="admin_stats.setQuery(this);">Users per Month</li>
    <li id="statsByUser" onClick="admin_stats.setQuery(this);">Stats by User</li>
</ul>

the this.attr(“id”) is then used to look up what the actually SQL text looks like, from a json-style variable:

queries : {
    usersPerMonth : " ... some sql ...",
    statsByUser   : " ... some sql ...",
    ...
}

so that’s why I have the divs named that way (and I’m open to design suggestions)

Answer 1

$(function() {
    $('#myList').delegate('li', 'click', function() {
        admin_stats.setQuery( this );
    });
});

This assumes your <ul> element has the ID myList. It will handle clicks inside of it on any <li> elements, calling your function, and passing this as the argument.

The .delegate() code is wrapped in $(function() {}); so that it doesn’t run until the DOM is ready. This is a shortcut for jQuery’s .ready() function.