0

I am having issues with the .click function working for a

tag within a jQuery dialog.

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

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

div

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

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.

jQuery

$(".userColor").on({
    click:function(){}            
});

What is the correct jQuery to get a click event to fire within a jQuery dialog?

Felix Kling
  • 705,106
  • 160
  • 1,004
  • 1,072
Kris.Mitchell
  • 979
  • 2
  • 15
  • 33
  • possible duplicate of [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand) – Felix Kling Mar 15 '13 at 15:03

2 Answers2

3

This will work :

$(document).on("click", ".userColor", function(){
 alert("yippie");
});

Or (click alone will not work if content is dynamically loaded)

$(".userColor").click(function(){
 alert("yippie");
});
ant
  • 21,609
  • 35
  • 125
  • 176
  • .click doesn't work because I am dynamically loading the div with content. – Kris.Mitchell Mar 15 '13 at 15:02
  • Ok you didn't specify that information so first one should work? does it? – ant Mar 15 '13 at 15:02
  • 1
    Yes you still need to use document. – ant Mar 15 '13 at 15:07
  • Though it's one of possible approaches, in general there is no need to use document for this at all - as the content is loaded dynamically it's just required to attach the listener at the right time - once the element loading is finished. This particular point in time depends on the method one uses to add an element, but jquery provides callbacks for that - just place "click attaching logic" under that callback and you should be good – vir us Mar 25 '18 at 14:00
1

If your content is loaded dynamically, use this format of .on():

$(document).on("click", ".userColor", function(event){
   //dostuff
});

From the .on() docs:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.

j08691
  • 190,436
  • 28
  • 232
  • 252
  • I am already within the $(document).ready(function(){} realm, do I still use the $(document) ? – Kris.Mitchell Mar 15 '13 at 15:05
  • @Kris.Mitchell: One has nothing to do with the other. Read the documentation about delegated event handlers. – Felix Kling Mar 15 '13 at 15:06
  • Yes, the `(document).ready(` code just executes your jQuery once the DOM is ready. If you're dynamically loading elements into your page, as you say you are, then you need to bind event to them using .on() in the way I showed. – j08691 Mar 15 '13 at 15:06