turn inline onClick event on off

Question

Я делаю проверку, когда мне нужно отключить inline onClick событие, а затем включить его.

JQuery on off метод не работает для inline onClick event. В строке ниже удаляется событие onClick. До этого я экономлю событие в массив

$('.elements a').prop('onclick',null).on('click'); 

Сохранение событий в массив

var arr = []; 
    var i = 0; 
    $('.elements a').each(function(){ 
     arr[i++] = $(this).attr('onclick'); 
     }); 

Как переназначить эти события в том порядке, к каждому элементу. Надеюсь, он может быть добавлен с помощью addEventListener?

Или есть ли другой способ добиться того же?

Answer 1

Поскольку вы должны использовать встроенные обработчики событий, вы можете хранить удалены атрибуты в массиве, а затем просто сбросить их обратно:

var events = $('.elements a').map(function() { 
 
    var onclick = $(this).attr('onclick'); 
 
    $(this).removeAttr('onclick'); 
 
    return onclick; 
 
}).get(); 
 

 

 
// ... Apply events later 
 
$('.reset').click(function() { 
 
    $('.elements a').each(function(i) { 
 
\t  $(this).attr('onclick', events[i]) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elements"> 
 
    <a href="#" onclick="console.log(1)">Link 1</a> 
 
    <a href="#" onclick="console.log(2)">Link 2</a> 
 
    <a href="#" onclick="console.log(3)">Link 3</a> 
 
</div> 
 

 
<button class="reset">Reset events</button>

Answer 2

Вот решение Javscript:

1. Итерация элементов
2. Проверьте, есть ли элемент id существует в заранее определенном объекте
3. Если он существует, удалите ключ из объекта и повторно назначить его на onclick событие
4. Если он не существует, удалить обработчик событий и сохранить его на объект с элемент id в качестве ключевого

Демо Fiddle: http://jsfiddle.net/abhitalks/op6nt25f/

Demo Отрывок:

var btn = document.getElementById('btn'), 
 
    anchors = document.querySelectorAll('.elements a'), 
 
    elems = {}; 
 
btn.addEventListener('click', toggleClick); 
 

 
function toggleClick() { 
 
    [].forEach.call(anchors, function(anchor) { 
 
     if (anchor.id in elems) { 
 
      anchor.setAttribute('onclick', elems[anchor.id]); 
 
      delete elems[anchor.id]; 
 
      btn.innerText = 'Disable click event'; 
 
     } else { 
 
      elems[anchor.id] = anchor.getAttribute('onclick'); 
 
      anchor.setAttribute('onclick', ''); 
 
      btn.innerText = 'Enable click event'; 
 
     } 
 
    }); 
 
} 
 

 
function dojob(elem) { snippet.log(elem.innerText); }

<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<ul class="elements"> 
 
    <li><a id="a1" href="#" onclick="dojob(this)">One</a></li> 
 
    <li><a id="a2" href="#" onclick="dojob(this)">Two</a></li> 
 
    <li><a id="a3" href="#" onclick="dojob(this)">Three</a></li> 
 
    <li><a id="a4" href="#" onclick="dojob(this)">Four</a></li> 
 
</ul> 
 
<button id="btn">Disable click event</button>