.click not fired for <p> tag within jQuery dialog
<p>I am having issues with the .click function working for a <p> tag within a jQuery dialog.</p>

<p>I have a a p tag that looks like below, inside a jQuery dialog.</p>

<pre><code>&lt;p class="userColor" id="CMP|8|25691/XX|25691/59|59" style="text-decoration:underline;cursor:pointer;"&gt;59   - GRAPE&lt;/p&gt;
</code></pre>

<p>div</p>

<pre><code>&lt;div id="colorPickerWindow" style="width: auto; min-height: 89px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content"&gt;
    &lt;p class="userColor" id="CMP|8|25691/XX|25691/20|20" style="text-decoration:underline;cursor:pointer;"&gt;20   - RED&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>I have tried .click and .on and I have tried both using a selector, but I cannot get the a click action to fire for the P tag.</p>

<p>jQuery</p>

<pre><code>$(".userColor").on({
    click:function(){}            
});
</code></pre>

<p>What is the correct jQuery to get a click event to fire within a jQuery dialog?</p>
