Question

I needed to update my jQuery library for some bugs that IE9 has with <= v1.5.0. Upgrading the library to 1.5.1+ (even at current 1.6.4) breaks some script that I have on the page, though… (so of course, fix one issue, cause another)…

The script allows the user to add and subtract a group of input boxes (so, if they want to input a single line item, they do just that… but they can add unlimited amount of additional line items).

//ADDS ANOTHER USER
$(".add-user").click(function() {
    onemore = $("#userSelectBoxes").clone();
    onemore.find(":input").each(function() {
        $(this).val("");
    });

    $("#user_block > #userSelectBoxes:last").after(onemore);
    set_add_del();
    return false;
});

$(".removeable").click(function() {
    $(this).parent().remove();
    set_add_del();
    return false;
});

function set_add_del() {
    $('.remove_cat').show();
    $('.add_cat').hide();
    $('.add_cat:last').show();
    $("#user_block > #userSelectBoxes:only-child > .remove_cat").hide();
}

The add and remove buttons, in the HTML are as follows (and they just add another DIV of input fields basically):

<a href="#" class="remove_cat removeable">-</a>
<a href="#" class="add_cat add-user">+</a>

So with 1.5.0 – this would work properly, and let me click + or – unlimited amount of times and always function. With 1.5.1+, I can click the + ONCE, then nothing else works (adding OR deleting).

Any ideas? Hopefully I included all that would be needed here…

UPDATE 9/27/11 @ 5:05 PM EST
I followed the suggestions in the comments below. No luck. It actually performs exactly the same…

I should note that when I click for the 2nd time, not only does it no work (as I stated earlier), but it will pop me back up to the top of the screen as well.

Here is the latest code…

$(".add-user").click(function(){
                onemore = $(".userSelectBoxes").first().clone();                

                onemore.find(":input").each(function(){
                    $(this).val("");
                });

                $("#user_block > .userSelectBoxes:last").after(onemore);
                set_add_del();

                return false;
            });

            $(".removeable").click(function(){
                $(this).parent().remove();
                set_add_del();
                return false;
            });

            function set_add_del(){
            $('.remove_cat').show();
            $('.add_cat').hide();
            $('.add_cat:last').show();
            $("#user_block > .userSelectBoxes:only-child > .remove_cat").hide();
            }

Answer 1

You can use two different versions of jQuery on a page. You’ll need to call .noConflict() after loading the second version of the library. This will reset the value of the $ object to the first version of the library.

Documentation

<script type="text/javascript" src="jquery.1.5.0.js"></script>
<script type="text/javascript" src="jquery.1.5.1.js"></script>
<script type="text/javascript">
    $.noConflict();

    //'$' now refers to 1.5.0
    //'jquery' now refers to 1.5.1
</script>