Remove class from iframe and prevent default action

Question

Here's my senario...

My iframe has a bunch of clickable buttons with a class of .action-item

$(".action-item").bind("click", function() {
   // do something
});

On the parent page I am targeting my iframe and removing the .action-item class. I've confirmed using Chrome developer tools, that the items do have the removed class.

$("#bottom-iframe").contents().find(".action-item:visible").each(function() {
     $(this).unbind('click');                   
     $(this).removeClass("action-item"); 
});

But unfortunately, the clicks are still registered and work, even when I remove the class. Is there a solution or something I'm overlooking?

This is related to http://stackoverflow.com/questions/251420/invoking-javascript-in-iframe-from-parent-page — Aiias, Apr 07 '13 at 23:55

score 0 · Answer 1 · answered Apr 07 '13 at 23:56

0

You need to remove the binding. You probably want to use .on() and .off().

answered Apr 07 '13 at 23:56

score 0 · Answer 2 · answered Apr 07 '13 at 23:56

0

You can remove the event handler like so:

$("#bottom-iframe").contents().find(".action-item:visible").each(function() {                       
    $(this).unbind('click');
    $(this).removeClass("action-item"); 
});

answered Apr 07 '13 at 23:56

dinjas

2,115
18
23

This works, but as of jQuery 1.7 `.on()` and `.off()` are preferred. – Apr 07 '13 at 23:57
True, I rolled with unbind since he was using bind. – dinjas Apr 07 '13 at 23:59
This doesn't seem to be working. I tried using .off() as well and the clicks are still registered and performing the normal action. – Jako Apr 08 '13 at 00:02
@Jako Please update your original post with the code you are trying that doesn't work. – Apr 08 '13 at 00:30

Remove class from iframe and prevent default action

2 Answers2