✔ change auf Select oder Checkbox funktioniert nicht

[Kalito]

Hallo,

ich habe folgende HTML-Struktur:

<div id="crafter-form">
        <div id="form-1" class="formular display">
            <div class="input select">
            <label for="rechenpaket-0-elements">Elememet der</label>
            <select name="rechenpaket[0][elements]" id="rechenpaket-0-elements">
                <option value="n">Natürlich Zahlen</option>
                <option value="z">Ganze Zahlen</option>
                <option value="r">Reele Zahlen</option>
            </select>
        </div>
        <div class="input checkbox">
            <input type="hidden" name="rechenpaket[0][allow10er]" value="0">
            <label for="rechenpaket-0-allow10er">
                <input type="checkbox" name="rechenpaket[0][allow10er]" value="1" id="rechenpaket-0-allow10er">Erlaube 10er-Übergang
            </label>
        </div>
    </div>
</div>

Nun will ich auf die Änderung des Select reagieren. jedoch funktioniert der folgende JS-Code nicht.

$('#rechenpaket-0-elements').on('change',function(){
    console.log('test');
});

Wo liegt mein Denkfehler? $( '#crafter-form' ).on('click','.update-rechenpaket',function(){ funktioniert ja.

Danke und Gruß
Patrick

 

[merzi86]

Hi Kalito,

ich habe gerade mal dein Skript auf jsfiddle getestet.
Es funktioniert dort mit dem neuestens JQuery Framework (zu sehen ist das hier.

Ich würde tippen, dass du irgendwo anders ein Fehler hast und deshalb wird das Skript nicht ausgeführt

 

[Kalito]

Ja, das habe ich auch getestet und dort funktioniert es und bei mir nicht. Könnte es daran liegen, dass ich das Formular erst später im Dom nachlade bzw. generiere? Wenn ja, dann wundert mich, das bei mir

$( '#crafter-form' ).on('click','.update-rechenpaket',function(){})

funktioniert

 

[merzi86]

Es liegt zu 100% daran, dass das Element nachgeladen wurde.
Der Grund ist, dass du ein neues in das DOM hinzufügst aber dieses Element hat nicht diesen Event-Handler.

Das Problem kannst du mittels delegate umgehen.

$( '#crafter-form' ).delegate( '#rechenpaket-0-elements', "change", function() {
    console.log('test');
});

Dabei ist nur darauf zu achten, dass das Element, auf das sich zuerst bezieht (im Beispiel $( '#crafter-form' ) ) ersten bei der Ausführung des Skripts bereits existiert und 2. das dieses Element ein Parent Element (muss nicht der direkte Parent sein) des gewünschten Elements ist.

 

[Kalito]

Das funktioniert nur bedingt. Wenn ich auf ein Element klicke, welches mir dann das Formular anzeigt, hole ich mir die ID des Elements. Über dieses weiß ich eigentlich, welches Element ich überwachen will.

var id;
   
    //Ermittlung der aktuellen Form
    $( '.page' ).on('click','.draggable',function(){
        var pre_id = $(this).attr('id').split('-');
        id = pre_id[1];
        console.log('#rechenpaket-'+id+'-elements');
    });

    //Bei Änderung des Elementbereich
    $( '#crafter-form' ).on( '#rechenpaket-'+id+'-elements', "change", function() {
        console.log('works');
    });

Ich denke mal, dass das wegen der Variable nicht funktioniert. Muss ich schon bei der Erstellung des DIV die ID kennen?

Gruß, Patrick

 

[merzi86]

Wie wäre es, wenn du den Handler erst setzt, wenn du weißt, welches Element überwacht werden soll.
Dann brauchst du nicht einmal mit delegate arbeiten.

 //Ermittlung der aktuellen Form
$( '.page' ).on('click','.draggable',function(){
    var pre_id = $(this).attr('id').split('-');
    id = pre_id[1];
    console.log('#rechenpaket-'+id+'-elements');

    //Bei Änderung des Elementbereich
    $('#rechenpaket-'+id+'-elements').on(  "change", function() {
        console.log('works');
    });
});

Ich habe den Code jetzt nicht getestet, er müsste aber so funktionieren.

 

[Kalito]

funktioniert, danke