jQuery Design Pattern for Updating Selectors When the HTML Changes
<p>I'm looking for some advice on a making my jQuery selectors more configurable. For example, given the following HTML generated by PHP:</p>

<pre><code>&lt;ul id="my-list"&gt;
    &lt;li&gt;first&lt;/li&gt;
    &lt;li&gt;second&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And a bit of jQuery:</p>

<pre><code>$(function() {
    $(document).on("click", "#my-list li", function() {
        alert("You clicked " + $(this).text());
    });
});
</code></pre>

<p>So far so good, but then one day the designer comes along and renames the id "my-list" to "list-of-numbers", and the javascript stops working. Currently the solution is <em>remembering</em> to grep through the code for any references to "my-list", but that's very faulty. Is there a jQuery design pattern for making the selectors configurable?</p>
