Javascript, add click event dynamically inside for loop

Question

I would like to add a click event to some elements in my HTML code. Here is the code I wrote :

var listsArr = ['list_surgeries', 'list_injuries'];
var divsArr = ['divSurgeries', 'divInjuries']

 for(var i=0; i<listsArr.length; i++){
        $('#'+listsArr[i]).bind("click", {i: i},function() {
            var displayProp = $('#'+divsArr[i]).css("display");
            if(displayProp === "none"){
                $("#"+listsArr[i]).css("list-style-image","url('images/minus.gif')");
            }else if(displayProp === "block"){
                $("#"+listsArr[i]).css("list-style-image","url('images/plus.gif')");
            }
            $('#'+divsArr[i]).slideToggle();
        }); 
    }

I can see the minus and plus gif images added to my ul lists and this shows that the function inside the loop is working however no click event is added.

Is there something wrong with the way I'm adding the event dynamically?

Thanks.