-1

I've got a content editable div like this:

<div id="editor" contenteditable="true">

And I've got two buttons:

<div id="button1" onclick="javascript()">

<div id="button2" onclick="javascript()">

Both buttons call the same javascript-function, so this function will be repeated every time you click on one of the buttons. For example:

When I click on button1, the script adds an Eventlistener to the editor. I use this to save the content of the editor on certain keystrokes.

When I click on button2, the eventlistener needs to be removed and a new one needs to be added. How can I do that?

I already tried this:

function javascript() {

// remove the eventlistener 
editable.removeEventListener('keydown', keydownsave, true);

var editable = document.getElementById('editor');
editable.addEventListener('keydown', keydownsave, true);

keydownsave = function(e) {

    // execute only if certain keys are pressed. 
    var toets = e.keyCode;
    var ctrls = e.ctrlKey;
    if (toets == 32 || toets == 13 || ctrls == true && toets == 83)

But this didn't work.

Anderverhaal
  • 7
  • 4
  • 2
    Possible duplicate of [JavaScript: remove event listener](https://stackoverflow.com/questions/4402287/javascript-remove-event-listener) – dota2pro May 09 '19 at 19:58
  • Wouldn't it make more sense from a UI/UX point of view to hide the button or at least disable it, until its needed again, instead of removing its listener, rendering it useless? – Constantin Groß May 09 '19 at 20:06
  • Thx for your answer! I actually need those buttons to be clickable. They make stuff visable in the contenteditable :) – Anderverhaal May 10 '19 at 15:04

2 Answers2

0

You can use unbind to do this. unbind

$('#t').click(function() {
alert('clicked')
})

$('#t').on('mouseover',function() {
$(this).html('mouse over')
})

$('#t').on('mouseout',function() {
$(this).html('button with event listeners')
})

function removeEventListeners() {
$('#t').unbind()
$('span').html('this button has no events')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id=t>button with event listeners</button>

<span>this button has click, mouse over and mouse out event</span>

<br>
<button onclick="removeEventListeners()">remove event listeners</button>
Neel Bhanushali
  • 783
  • 5
  • 10
  • Thanks for your explaination! I'm very grateful for this, but after a bit of coding today I think my problem is a bit different than this solution can fix. I'll try to explain below :) – Anderverhaal May 10 '19 at 15:07
0

I actually create a bunch of these div-buttons on the fly:

<div id="subchaptertitle" data-chapid="1" data-subid="1" onclick="javascript:open_editor()">bos in brand</div>

Each button has different data and with onclick they start the function open_editor.

In this way, a new instance of the function is called every time you click on one of the buttons. But these functions never close, which means they keep running in the background, breaking the way I save stuff.

What I actually need is to end the previous function with it's eventListener, before the same function is called again. Is this possible in JavaScript?

Anderverhaal
  • 7
  • 4