在asp.net上的简单jQuery不适用于firefox

Question

I have been struggling with getting this work on Firefox. Hope there is somebody help me!

Basically; Firefox ignores the button click function and it's sub functions and the button posts the page instead of running the jquery code.

It works on IE and Chrome but not on Firefox.

Thank you for your help in advance.

Here is the output code:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {

        $(".CatList li").click(function() {
            if ($(this).is(".selected")) {
                $(this).attr("class", "");
                $('#ctl00_ContentPlaceHolderRight_CatChanged').val(1);
                return false;
            }
            else {
                $(this).attr("class", "selected");
                $('#ctl00_ContentPlaceHolderRight_CatChanged').val(1);
                return false;
            }

        });


        $("#ctl00_ContentPlaceHolderRight_btnSave").click(function() {
            var elements = $("li.selected");
            if (elements.val() == null) {
                alert("You must select at least one category");
                return false;
            }
            else {
                elements.each(function() {
                    $('#ctl00_ContentPlaceHolderRight_CatChecked').val($('#ctl00_ContentPlaceHolderRight_CatChecked').val() + "," + $(this).attr("id"));
                    return true;
                });
            }
        });
    });
</script>

Answer 1

Do you know firebug Firefox Extension? It is very useful for debug Javascript on Firefox.

Firebug also include a Javascript console where you can test your functions.

Answer 2

Don't check against null -- try to stick with the undefined that jQuery ensures. Check what elements.val() returns to start (just alert it).

Also, you don't preventDefault() or return false in the else clause which could be a reason for Firefox to submit the page.

Answer 3

Thank you tjko, using alert saved my day. I was just too confused. I have changed the code as below and everything works perfectly:

            var elements = $("li.selected");
            elements.each(function() {
                $('#<%=CatChecked.ClientID%>').val($('#<%=CatChecked.ClientID%>').val() + "," + $(this).attr("id"));
            });
            if ($('#<%=CatChecked.ClientID%>').val() == "") {
                alert("You must select at least one category");
                return false;
            }
            else {
                //alert($('#<%=CatChecked.ClientID%>').val());
                return true;
            }