ajax - jQuery ajax ライブ更新の問題

Question

<a> が <div id="list"> の外側に配置されている場合にうまく機能するこのコードがありますが、リンクがターゲット div 内に配置されている場合はそうではありません。event.preventDefault() はトリガーされません。どんな助けでも大歓迎です。ありがとう！

    <script>
    $( document ).ready(function() {
        $( ".category_link" ).on('click' ,function () {
            event.preventDefault();
            var addressValue = $(this).attr("href");
            function getUrlVars()
            {
                var vars = [], hash;
                var hashes = addressValue.slice(addressValue.indexOf('?') + 1).split('&');
                for(var i = 0; i < hashes.length; i++)
                {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }
            site_location = getUrlVars()["location"];
            category_id = getUrlVars()["category_id"];
            per_page = getUrlVars()["per_page"];
            request_type = getUrlVars()["request_type"];

            //send the request via ajax
            $.ajax({
                    type: "POST",
                    url: "/test/testing/",
                    data: {site_location : site_location, category_id : category_id, per_page : per_page},
                    dataType: "html"
            }).done(function( msg ) {
                //get the returned message
                $( "#list" ).html(msg);
            }); 

        }); 
    });
</script>



<div id="list">
<a class="category_link" href="/?site_location=testing&per_page=testing&category_id=testing&request_type=testing">Test</a>