Question

I am using a function to trigger when any of a particular set of anchors are clicked.
This works in Firefox 3 and Chrome.

They don’t exist when the page first starts loading as they are being created by XML+XSLT using client side transformation, just in case this is relevant some how.

I also only put that alert in there just to see if it was even doing anything… not even an alert in IE. It was not working in Chrome but that was because I was missing $document.ready statement [still worked in FF] but I am not sure what the missing element is for IE. I am using IE 8 btw.

        <script type="text/javascript">
        $(document).ready(function () {
            $("#BlogSelectList li a").click(function () {
                alert('hhi')
                var str = ($(this).attr("href")).slice(1, 37)
                $.ajax({
                    contentType: "application/json; charset=utf-8",
                    url: '../ws/WebServices.asmx/SetActiveBlog',
                    data: '{ActiveBlogID: "' + str + '"}',
                    dataType: 'json',
                    type: "post",
                    success: function (j) {
                            window.location.href = 'dashboard.aspx'
                    }

                });

            });
        })
    </script>

Answer 1

It probably is relevant that the anchors are not there when the doc first loads. You could do a quick fix by using the live method. This will apply your event to whatever you’re selecting even if it’s added to the DOM later.

$("#BlogSelectList li a").live("click", function() {etc...});

Also, if you’re using an anchor, you will probably need to set the href attribute to “#” so that it doesn’t trigger the browser default behavior of navigating somewhere.