Question

I have the following:

$("#city-button-panel a")
    .click(function () {
    preventDefault();
    var $link = $(this);
    getCityContentAjax($link);
});

But it’s not allowing me to preventDefault and it gives a syntax error

Here is what the elements look like that are deep inside #city-button-panel:

<a href="/City/1555009O" id="btn-49">49</a>

Answer 1

You need to call preventDefault on the event you’re being passed. Any other preventDefault is either undefined or does something else. Try:

$("#city-button-panel a")
        .click(function (event) {
            event.preventDefault(); 
            var $link = $(this);
            getCityContentAjax($link);
        });

Demo: http://jsfiddle.net/vatjK/

Note that the handler has to return successfully in order for the preventDefault to work. If getCityContentAjax throws an exception, the default action can not be prevented without also preventing the exception from propagating. You can, however, do this (if you can’t fix getCityContentAjax):

$("#city-button-panel a")
        .click(function (event) {
            event.preventDefault(); 
            var $link = $(this);
            try{
                getCityContentAjax($link);
            }catch(e){
                console && console.error(e);
                alert("Look at the console!!!"); // optional
            }
        });

There is no syntax error in this piece of code. If the browser thinks otherwise, you may have syntax error before the code. Note there’s a difference between a syntax error (unmatched parentheses and such) and a reference error (a function in the global scope does not exist).