I am trying to make the on-click event of any element optional depending on what the user decides. The only functions I see out there append a function to the on-click event. I have played with the browser bubbling / catching stuff too. That worked in Firefox but not in IE 7. It seems I can't access the on-click function if it was defined within the element's onclick="" attribute.
Here are my two approaches. Tell me if you have a better idea. <b>1) eval() </b>// I guess IE doesn't like us using this. Firefox doesn't care. <script type="text/javascript"> $(document).ready(function() { var onClickAttr = $('#clickTester').attr('onclick'); $('#clickTester').removeAttr('onclick').click(function(){ if (confirm('Perform Original Action?')) { eval(onClickAttr); } } }); </script> <input type="button" id="clickTester" onclick="alert('Original Action Performed.');" value="Do It!"> <b>2) Bubbling </b>// Again, IE problems while Firefox works just fine. <script type="text/javascript"> $(document).ready(function() { var $span = $('<span></span>').attr('onclick', $('#clickTester').attr('onclick')); $('#clickTester').removeAttr('onclick').wrap($span); $('#clickTester').click(function(event){ if (!confirm('Perform Original Action?')) { event.stopPropagation(); } }); }); </script> <input type="button" id="clickTester" onclick="alert('Original Action Performed.');" value="Do It!">