1

i'm creating an application where a user can make a html layout and attach javascript to it.

Now i'm trying to make it so when they click a button, they go to a preview mode where they can see it in action.. so when they click i add the javascript tag ( with their javascript) in the head of the iframe.. this all works fine!

But the problem is when they leave the preview mode, i remove the javascript tag, however when i have code like this:

$('#button').click(function()
{
    alert("ok"); 
});

it still alerts ok when i click the html button (when not in previewmode!), which shouldn't happen!

It seems that when removing the javascript tag, the listeners aren't removed.. Or am i doing it wrong?

Now my question: is there a way to make it so these added eventlisterens are removed when i remove the script tag?

AND YES: i know you can remove eventhandlers with .off(), but since i already have event handlers attached, these will be removed also, and i don't want this!

So two options i can think off: - rebuild the whole iframe - store the eventhandlers that were added by the user and when leaving the preview mode, removing them.

Thanks in advance

Captain Obvious
  • 538
  • 2
  • 11
  • 38
  • so where are your code? – Awlad Liton Feb 24 '14 at 20:11
  • Maybe try this: http://stackoverflow.com/questions/13945025/jquery-remove-all-event-handlers-inside-element. Or alternatively maybe you could reload your iframe again. – Gohn67 Feb 24 '14 at 20:37
  • The code isn't relevant here, because it's a simple add and remove of a script element and that is working fine.. @Gohn67 thanks, but not what i'm looking for :) – Captain Obvious Feb 24 '14 at 20:43
  • I thought you were looking to remove event handlers? And apparently when you remove the script elements, it doesn't get removed? If you reload the iframe with new content, then those events would be removed right? Or alternatively after you remove remove your script tag, then remove the the attached events in the iframe since they don't appear to be removed when you remove your script tag. Just guessing though. – Gohn67 Feb 24 '14 at 20:50
  • Yes, the problem is: i have a lot of click handlers already attached to the button in this case and when i rebuild the dom these will also be removed, which i don't want.. i only want to remove the newly attached ones – Captain Obvious Feb 24 '14 at 20:55

4 Answers4

1

Each time you "evaluate" JavaScript, it becomes part of the browser's "image", and whether the source is present on the page no longer matters. You need to manually unbind the event, or replace the html segment to which the event was bound.

To remove events from an html element, you can use:

element.parentNode.innerHTML = element.parentNode.innerHTML

This rebuilds the DOM tree using the same HTML.

sabof
  • 7,664
  • 2
  • 25
  • 49
  • Any ideas on how the know which eventhandlers are added from the point that the javascript is evaluated? – Captain Obvious Feb 24 '14 at 20:22
  • As far as I know, you can't. I've updated the answer with something you can try. Might be sufficient for what you are trying to do. – sabof Feb 24 '14 at 20:27
  • Hmm thanks, but the thing i have a lot of click handlers already attached and when i rebuild the dom these will also be removed, which i don't want.. but i'll probally have to, because it's either that or finding which event handlers were attached after the script is run.. So i'm waiting for some more responses about finding them :) – Captain Obvious Feb 24 '14 at 20:45
  • It doesn't replace all the tree. Only the "element" and it's siblings. If you wrap "element" in a "div", there won't be any siblings. – sabof Feb 24 '14 at 20:47
  • What i want to say is that, the button in this case, already has event handlers before the user's javascript is executed, which potentially adds more event handlers. Using your code it will remove them all or do i misunderstand? – Captain Obvious Feb 24 '14 at 20:50
  • No, you understood correctly. I misunderstood what you are trying to do. – sabof Feb 24 '14 at 20:52
0

Set the event:

var $button = $('#button');
$button.on("click", function() {
    alert("ok"); 
});

Take off the event:

$button.off("click");

You can take off that specific function too

var $button = $('#button');
var eventFunction = function() {
    alert("ok"); 
});

// Set event up
$button.on("click", eventFunction);

// Take event off
$button.off("click", eventFunction);

If you want to remove all events from an element you can use 

$("#yourSelector").off()
Tom Cammann
  • 14,873
  • 4
  • 32
  • 47
0

you need to unbind event.

You can do it by using jquery unbind() or off() like this:

$("#button").unbind("click");

or

$("#button").off("click");

Demo: http://jsfiddle.net/a6NJk/664/
jquery Doc: http://api.jquery.com/off/

Another good answer: Best way to remove an event handler in jQuery?

Community
  • 1
  • 1
Awlad Liton
  • 9,160
  • 2
  • 25
  • 46
  • How can i know which eventhandlers are attached? Because the javascript that is evaluated is from the user! I don't know what events they use. And i cannot do .off as this well remove all listeners and i don't want that. – Captain Obvious Feb 24 '14 at 20:20
0

Because it's not jQuery in general but also vanilla javascript, it would be too much work to keep track of javascript changes, so rebuilding the iframe would be the best option here.

Captain Obvious
  • 538
  • 2
  • 11
  • 38