How to reference classes in an iframe - html

Question

I have the below code. I'm trying to set a click event on the inner content of the iframe.
$(function(){
$("#popupIframe").load(function(){
var selection = $(this).find(".selectLocation").click(function(evt){
evt.preventDefault();
console.log("clicked");
});
console.log("this = ", $(this));
});
});
selectLocation is a class on a div element inside my iframe html. The above doesn't seem to work or at least the click event is not getting called. The console is tracing out the iframe selector.

Answer 1

This will only work on an iframe which has the same domain as the parent. Use contents() which you can then traverse just like any other object.
Example HTML:
<iframe id="fiddleframe" src="jsfiddle.net" width="400" height="400" />
Example JQuery:
$('#fiddleframe').contents().find('.pageHeader').css('border','3px solid red');
http://jsfiddle.net/AlienWebguy/Rbe2u/
UPDATE: A question was asked in the comments about using this practice on an iFrame that was created on the fly. To accommodate for JQuery-created iFrame, you need to ensure the iFrame's DOM has been loaded completely before you can apply any CSS manipulation.
$('#create').click(function(){
$('<iframe/>')
.attr({
id:"fiddleframe",
src:"jsfiddle.net",
width:"400",
height:"400"})
.appendTo('body')
.load(function(){
$(this)
.contents()
.find('.pageHeader')
.css('border','3px solid red');
});
});
http://jsfiddle.net/AlienWebguy/Rbe2u/1/

Answer 2

For anyone who is looking for the answer. This does not work for cross domain files.
$(function(){
$("#popupIframe").load(function(){
var $iframe = $(this.contentDocument||this.contentWindow.document);
$iframe.find(".selectLocation").click(function(evt){
evt.preventDefault();
console.log("clicked");
});
});
});
Thanks to HackedByChinese who posted it on this thread. How to find a div inside of an iframe