jQuery change() nicht funktioniert
Meine Seite hat drei html-select-tag.
Möchte ich diese drei select-tags haben folgende Funktionen:
Wenn ich ändern selectA , als selectB automatische änderung nach selectA.
Wenn selectB die option geschaffen hat , wenn ich selectB als selectC automatische änderung nach selectB.
(
Zum Beispiel...
ersten selectA die option haben, Sänger , Filmstar , selectB einfach leer.
wenn die Sängerin option aktiviert , selectB auto create option "Lady Gaga", "Celine Dion" , "Whitney Houston", Wenn die drei Sängerinnen und Sänger erstellt , wenn ich Sie geprüft habe "Lady Gaga" , die selectC schaffen "Geburtstag" , "Facebook" , "google+" - Optionen.
als movie-star-option , selectB auto create option "Bruce Willis" , "Matt Damon" , "Will Smith", Wenn drei Filmstars erstellt haben , wenn ich Sie geprüft habe "Bruce Willis" , die selectC schaffen "Geburtstag" , "Facebook" , "google+" - Optionen.
)
Mein problem ist...wenn ich selectB , $("#selectB_id").change() nicht funktionieren
Folgende ist mein javascript code:
$(function(){
$("#lineselect").change( function() {
$.ajax({
url: '/lineflow/ajaxgetselect',
type:'POST',
data:{ service_id:$("#lineselect option:checked").val() , level:1 },
success: function( res ){
var obj = jQuery.parseJSON(res);
if( $("#lineselect").val() == 0 )
{
$("#second_li").html("");
$("#third_li").html("");
}
else if( $("#lineselect").val() == 1 )
{
$("#second_li").html("");
$("#third_li").html("");
$("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>');
$("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>');
for( i=0; i<obj.length; i++)
{
$('#service_type').append($("<option></option>")
.attr("value",obj[i].id)
.text(obj[i].name));
}
}
else if( $("#lineselect").val() == 2 )
{
$("#second_li").html("");
$("#third_li").html("");
$("#second_li").html('<input type="text" id="url_name" name="url_name"></input>');
}
else if( $("#lineselect").val() == 3 )
{
$("#second_li").html("");
$("#third_li").html("");
$("#second_li").html('<select id="url_type" name="url_type"><option value="0">ALL</option></select>');
for( i=0; i<obj.length; i++)
{
$('#url_type').append($("<option></option>")
.attr("value",obj[i].id)
.text(obj[i].name));
}
}
},
error: function(obj, status, err){}
});
});
$("#service_type").change( function() { //this change not work!!!
$.ajax({
url: '/lineflow/ajaxgetselect',
type:'POST',
data:{ service_id:$("#service_type option:checked").val() , level:2 },
success: function( res ){
var obj = jQuery.parseJSON(res);
$("#third_li").html("");
$("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>');
for( i=0; i<obj.length; i++)
{
$('#service_type').append($("<option></option>")
.attr("value",obj[i].id)
.text(obj[i].name));
}
},
error: function(obj, status, err){}
});
});
});
- Versuchen Sie "auf" statt "change": $(...).auf('change', ...)
- Es gibt keinen Unterschied zwischen denen, die...
.change(func)
ist nur eine Abkürzung für.on("change", func)
Du musst angemeldet sein, um einen Kommentar abzugeben.
In dieser Zeile:
Wie Sie sehen, Sie sind das hinzufügen der
#service_type
element, um den DOM, nach anbringen der event-handler zu.Aus diesem Grund verwenden, müssen Sie die event-delegation. Diese kann getan werden, indem
.on()
Methode in jQuery:#second_li
element muss in der statischen auf die Seite. Andernfalls verwenden Sie einen anderen Selektor.Referenzen:
.auf()
- jQuery API-DokumentationMithilfe von Ereignis-delegation: