关闭内联onClick事件

Question

I'm doing some validation where i need to turn off inline onClick event and then turn it on.

Jquery on off method does't work for inline onClick event. The line below removes the onClick event. Before this I'm saving event into an array

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

Saving events into array

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

How can I reassign these events in same order to each element. Hope it can be added using addEventListener ?

Or is there any other way to achieve the same ?

Answer 1

Since you have to use inline events handlers, you can store removed attributes in array and then just reset them back:

 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) { $(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

Here is a Javscript solution:

1. Iterate the elements
2. Check if the element id exists in a predefined object
3. If it exists, remove the key from the object and re-assign it to the onclick event
4. If it doesn't exist, remove the event handler and save it on the object with the element id as key

Demo Fiddle: http://jsfiddle.net/abhitalks/op6nt25f/

Demo Snippet:

 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>