Getting twice the same function

Question

I can't figure out what's happening here. When I select the $('#semestre') option, everything works perfectly. Then I select the $('#turma') option and change its value. Everything works. Then, I change the $('#semestre') value again, and everything works. However, when I change again the $('#turma') value, I get the alert twice. And if I do it again, I get three times the alert and so on. What am I missing here?

$(document).ready(function(){
    $('.turma').hide();
    $('#semestre').change(function(){
        if($(this).val() != ''){
            $('.options_turma').remove();
            $('.turma').show();
            $.post('seleciona_turmas.php', {cd_turma: $(this).val()}, function(data){
                var item;
                data = jQuery.parseJSON(data);

                $.each(data.json, function(){
                    item = "<option class='options_turma' value='" + this['codigo'] + "'>" + this['descricao'] + "</option>";
                    $('#turma').append(item);
                });

                $('#turma').change(function(){
                    if($(this).val() != ''){
                        alert("OK");
                    }else{
                        alert('NULL');
                    }
                });
            });
        }else{
            $('#turma').val('');
            $('.turma').hide();
        }
    });
});

I tried to be clear, but it's a confusing question.

You are attaching the handler multiple times. Each time the `semestre` change handler runs it attaches *another* change handler to `turma` — Matt Burland, Feb 04 '14 at 16:49
@Matt Burland But then why doesn't the alert show up when semestre changes? ;s I need to change semestre value to that happen, then it happens twice :/ — ahmm95, Feb 04 '14 at 16:54
@user3260711 - because you're not alerting anything when `semestre` changes. — Venkata Krishna, Feb 04 '14 at 16:56

Venkata Krishna · Accepted Answer · 2014-02-04T16:55:45.760

0

You are binding the change event every time you change the semestre dropdown. Pull the #turma event out of the semestre change event.

Like this

$('#semestre').change(function() {
    //Semestre code
});

$('#turma').change(function(){
    //Turma code
});

edited Feb 04 '14 at 16:55

answered Feb 04 '14 at 16:49

Venkata Krishna

14,926
5
42
56

I tried, it didn't fix my problem :/ Where should I put this? I just replaced this part – ahmm95 Feb 04 '14 at 16:57
@user3260711 - look at my updated answer. It needs to come out of the 1st change event & become a separate event. – Venkata Krishna Feb 04 '14 at 17:00

score 0 · Answer 2 · answered Feb 04 '14 at 16:57

0

I think that the .change event on #turma tag must be out of .change event on #semestre tag

answered Feb 04 '14 at 16:57

ghosty89

86
4

score 0 · Answer 3 · answered Feb 04 '14 at 17:02

0

$('#turma').on('change', function() {
  // ....
});

answered Feb 04 '14 at 17:02

iury

118
5

How is that different from what OP already has? `.change()` is just a shorthand for `on('change')`. http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click – Venkata Krishna Feb 04 '14 at 17:04

Getting twice the same function

3 Answers3