Question

Looking to catch the click eventfrom this anchor embedded within a div….the anchor actually calls a modal dialog form and I need to supress that call so the popup doesn’t come up.

<div id="whatever"><a class=" modal-dialog button action-add" href="/x/y/z">add</a></div>

<script type="text/javascript">
    $("#whatever").click(function (e) {
        alert('hello');
        e.preventDefault();
    });
</script>

The above code gets called but it is popping up a modal form/popup and I want somehow supress the popup on that anchor click. I thought e.preventDefault would do this but the popup is still coming up.

Answer 1

The problem is that your handler is only invoked after it propagates from the anchor click, this means the default behavior for the anchor is still occurring.

If you only have the anchor inside the div, this will do the trick:

<script type="text/javascript">
    $("#whatever a").click(function (e) {
        alert('hello');
        e.preventDefault();
    });
</script>

If you have something else:

<script type="text/javascript">
   $("#whatever a").click(function (e) {
        e.preventDefault();
    });
    $("#whatever").click(function (e) {
        alert('hello');
    });
</script>