Get value from jquery function and use it in other script

Question

I made this function with the intection to get the value of "select_sport" I tried to return but i don't know how can i take that value for use it in another script.

this is my function

 var selectSport_form = {
    urlSelect : CI_ROOT + 'search_sport',
    run : function() {
        selectSport_form.select_sport();
    },

    select_sport : function() {
        $(document).on('click', '#horiz_container img', function () {
                var img_selected = $(this), $li = img_selected.closest('li');
                var value_sport = $(this).attr('id');
                var $selected = $('#horiz_container .selected').removeClass('selected');
                $selected.find('.selected_sport').remove();

                $li.addClass('selected');
                $li.prepend('<div class="selected_sport"><img src="' + CI_ROOT + 'resources/img/select.png"></div>');
                return value_sport;
        });
}
};

And i tried to call it like that but doesn't work

    $(function(){
      selectSport_form.run();
      if(selectSport_form.select_sport() != "") {
        alert('Work');
      }
    });

Answer 1

You can't return a value from an event handler to the function which set the event handler. That function will have finished running long before the event happens.

You have to use a callback. This is a more general case of getting the value from ajax (in which the event handler in question is the one that fires when the HTTP response is received).

Answer 2

You have two options depending upon what you're really trying to do:

1. You can take the code from the click handler and put it in stand-alone function that you can then call anytime you want to see what the value it computes is.

2. You can store the value from the click handler in a variable at an appropriate scope and then you can refer to that variable later from any other javascript that is at the appropriate scope. If the scope is global or globally accessible, then all functions can access it.

As you've probably already discovered, returning a value from an event handler won't help you here.

Here's an example of option #2:

var selectSport_form = {
    urlSelect : CI_ROOT + 'search_sport',
    run : function() {
        selectSport_form.select_sport();
    },

    select_sport : function() {
        $(document).on('click', '#horiz_container img', function () {
                var img_selected = $(this), $li = img_selected.closest('li');
                var value_sport = $(this).attr('id');
                var $selected = $('#horiz_container .selected').removeClass('selected');
                $selected.find('.selected_sport').remove();

                $li.addClass('selected');
                $li.prepend('<div class="selected_sport"><img src="' + CI_ROOT + 'resources/img/select.png"></div>');
                // save the ID value of this click for future reference
                selectSport_form.lastClickValue = value_sport;
        });
    }
};

Then, elsewhere in your code, you can check the value of selectSport_form.lastClickValue .

if (selectSport_form.lastClickValue == "something") {
    // do something
}

Answer 3

If you console.log(selectSport_form.select_sport()); you'll see that your select_sport() doesn't return anything, it's undefined. What do you want this function to do? It won't return the click event you have defined within it.