Jquery - При нажатии на элемент выбора - Как выполнить только один раз каждый раз, когда я нажимаю?

Question

У меня есть элемент select в форме, и мне нужно, чтобы при нажатии на него выполнялся какой-то код И когда я выбирал параметр, код не выполнялся.

Приведенный ниже код выполняется дважды, поэтому я не могу выбрать опцию, код выполняется снова сам, и мне остается сбросить выбранную опцию.

HTML:

<select class="form-control" id="opportunity_id" name="opportunity_id">
    <option value="">(Choose opportunity)</option>
</select>

JS:

$('#opportunity_id').on('click', function(ev) {

    $.ajax({
      url: "/opportunitylist/",
      type: 'GET',
      success: function(resOpportunities) {

        var $select = $('#opportunity_id');
        $select.find('option').remove();

        var count = 0;
        $select.append("<option value=''>(Choose opportunity)</option>");
        $.each(eval(resOpportunities), function(key, value) {
            $select.append('<option value=' + value[0] + '>' + value[1] + '</option>');
            count = count+1;                              
        });
      }
    }); 
});

Мой вопрос, есть какое-то исправление для этого кода? Как я могу выполнить этот код один раз каждый раз, когда я нажимаю на элемент select?

Answer 1

Вы можете попробовать удалить обработчик события всякий раз, когда событие инициируется, используя цепочку событий, например:

$('.selector')
        .off('click', '.item')
        .on('click', '.item', function() {
            // code goes here
         })

Так что в вашем случае это будет выглядеть так:

$('#opportunity_id').off('click').on('click',callBackEnd());

function callBackEnd(ev) {

    $.ajax({
      url: "/opportunitylist/",
      type: 'GET',
      success: function(resOpportunities) {

        var $select = $('#opportunity_id');
        $select.find('option').remove();

        var count = 0;
        $select.append("<option value=''>(Choose opportunity)</option>");
        $.each(eval(resOpportunities), function(key, value) {
            $select.append('<option value=' + value[0] + '>' + value[1] + '</option>');
            count = count+1;                              
        });
      }
    }); 
}

Answer 2

Решено с фокусом

$('#opportunity_id').on('focus', function(ev) {

$.ajax({
  url: "/opportunitylist/",
  type: 'GET',
  success: function(resOpportunities) {

    var $select = $('#opportunity_id');
    $select.find('option').remove();

    var count = 0;
    $select.append("<option value=''>(Choose opportunity)</option>");
    $.each(eval(resOpportunities), function(key, value) {
        $select.append('<option value=' + value[0] + '>' + value[1] + '</option>');
        count = count+1;                              
    });
  }
}); 
});