I have styled a list to look like a select box and I want to fire a function when the user clicks an element in the list however the element is loaded via `AJAX` and hence isn't there when the page loads and I can't bind an `onclick` event to it `onDomReady`.

If I had it as a normal select list I could just tag on an `onChange` event to the `<select>` field, but I obviously can't do that in my case.

My HTML:

```
<div id="main_category_field" class="fields">
    <div class="cat_list">
        <ul>
            <li class=""><a rel="1866" href="#1866">Sports Cards &gt;</a></li>
            <li class=""><a rel="1867" href="#1867">Gaming Cards &gt;</a></li>
            <li class=""><a rel="1868" href="#1868">Non-Sport Cards &gt;</a></li>
            <li class=""><a rel="1869" href="#1869">Supplies &amp; Storage &gt;</a></li>
            <li class=""><a rel="1940" href="#1940">Video Games </a></li>
        </ul>
    </div>
    <div class="contentClear"></div>
</div>

```

How can I run a function whenever the user clicks any of these options? Also would be great if you could also advise how to pass the respective value of the `rel` back when they click an option.

Using jQuery so options in that would be preferred.

**Edit:** Meant to say that the main element `main_category_field` is a static element. The elements inside are loaded via AJAX.