jQuery trim and remove on parent break child events
<p>Note: I have a workaround to this problem, but I'd prefer to comma-separate the values as I describe below rather than separating them with spaces (which is what my workaround does).</p>

<p>I have an ASP.NET website that allows instructors to choose from a DropDownList of preset comments and apply these comments to students in their classes. I display the students and comments inside a GridView, and use a Label to display any comments that already exist in the database (removing them from the DropDownList in the process). When an instructor selects one of these comments and clicks a button, my jQuery function:</p>

<ol>
<li>Pulls the selected value and text out of the option (provided it isn't the default option).</li>
<li>Checks Label.children().length, and appends a ", " to the text if it's greater than zero.</li>
<li>Creates a <code>&lt;span&gt;</code> tag with a hidden field containing the value and text.</li>
<li>Appends the text inside the span.</li>
<li>Closes the span.</li>
<li>Attaches an onclick event to the span.</li>
<li>Removes the original option from the DropDownList.</li>
</ol>

<p>The span tag's onclick event does the reverse of what I describe above -- it pulls the value and text out and re-creates the option inside the drop-down menu. Additionally, it replaces strings like ", , " with ", " in the parent Label. I've found that when I replace these strings (which lie outside the spans I've attached the onclick events to) that the onclick events go away.</p>

<p>I'm familiar with .live(), but because each row in this GridView contains a unique reference to the particular student and class currently in use, I can't know the values that each row needs to pass into the funciton ahead of time. Is there any solution to this problem other than my described workaround or re-attaching the onclick event?</p>
