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 = $('&lt;span&gt;&lt;/span&gt;').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!">

Reply via email to