CODEWITHSUNDEEP
jquery
MAX POWER
MAX POWER

Reputation: 5448

jQuery UI Dialog and IFRAME - with 'on' event handler

On the parent page of my IFRAME I have a jQuery event to detect a click on an element within the IFRAME. Clicking on this link opens up a jQuery UI dialog:

<iframe id="my-iframe" src="page.php">
    <div class="edit-content"></div>
</iframe>

$('#my-iframe').contents().find('body').on('click', '.edit-content', function(){
    $('#dialog', window.parent.document).dialog();
});

(the dialog content is stored in #dialog on the parent page)

Now on the dialog itself, I have a link to which I want to attach an 'on' event handler to:

<a href="#" class="edit-link" id="test-1">Test</a>

$('#dialog').on('click', $('.edit-link'), function(){
    alert($(this).attr("id"));
    return false;
});

However this is not returning the ID of the link, instead it is returning "dialog".

Upvotes: 0

Views: 379

Answers (2)

MAX POWER
MAX POWER

Reputation: 5448

Problem solved - it was an error in my original code - it should have been:

$('#dialog').on('click', '.edit-link', function(){

Instead of:

$('#dialog').on('click', $('.edit-link'), function(){

Upvotes: 0

Kory Hodgson
Kory Hodgson

Reputation: 790

this references the owner of the function, in your case this is dialog. Try this instead:

$('#dialog .edit-link').live('click', function(){
    alert($(this).attr("id"));
    return false;
});

Upvotes: 1

Related Questions