Calling a function in a jQuery event is not working

Question

So I have a pair of <select> boxes and have a jQuery script to transfer selected <option>s from one select box to the other. I also have a function to do the opposite. This works fine except when I "put back" the <option>s to the first <select> they are appended to the bottom instead of alphabetically as before.

So I found this function courtesy of this question:

function sortSelect() {
    var options = $('#inactiveTickers option');
    var arr = options.map(function(_, o) {
        return {
            t: $(o).text(),
            v: o.value
        };
    }).get();
    arr.sort(function(o1, o2) {
        return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
    });
    options.each(function(i, o) {
        console.log(i);
        o.value = arr[i].v;
        $(o).text(arr[i].t);
    });
}

Then I have this jQuery which captures the click event on a link with id #remove:

$('#remove').click(function() {  
    return !$('#activeTickers option:selected').remove().appendTo('#inactiveTickers');  
    sortSelect();
  });

So the first line in the function does the moving of the <option> tags and the second should call the sortSelect function. The trouble is I don't think the sortSelect function is being called (there is nothing in the console log and the function should write to it). What's wrong with my code?

You have `return` in first line, the execution ends there... — tpeczek, May 10 '13 at 10:43
Also, your `sortSelect` function sorts only `select#inactiveTickers` - You might want to make that an argument as well.. — techfoobar, May 10 '13 at 10:44
@techfoobar Yes, I will make it an argument, just wanted to get it working first. Thanks — harryg, May 10 '13 at 10:53

score 2 · Answer 1 · answered May 10 '13 at 10:41

2

This is because you are already returning some value before you call sortSelect, the function call ends in the line of return. Just do not return anything or put the value into a variable an return it after you have called sortSelect.

$('#remove').click(function() {  
    var ret = !$('#activeTickers option:selected').remove().appendTo('#inactiveTickers');  
    sortSelect();
    return ret;
});

answered May 10 '13 at 10:41

user1983983

4,793
2
15
24

Thanks, your method probably works but as @steo said the first line doesn't return anything so best just to call it without return. – harryg May 10 '13 at 10:52

steo · Accepted Answer · 2013-05-10T10:52:05.447

1

Functions stops when you use they're return . I don't understand why you're using a return to do that stuff ,considering that appendTo() does not return anything (btw you don't need to return anything) . Just do

$('#remove').click(function() {  
$('#activeTickers option:selected').remove().appendTo('#inactiveTickers');  
sortSelect();
});

edited May 10 '13 at 10:52

answered May 10 '13 at 10:43

steo

4,586
2
33
64

Calling a function in a jQuery event is not working

2 Answers2