jQuery: von .addClass nach Klasse nach dem Unterricht ändern Auswahl() oder .attr()

Question

Ich habe einige Code jQuery etwas wie folgt aus:

$(document).ready(function() { 
    $("img.off").click(function() { 
     alert('on'); 
     $(this).attr('class', 'on'); 
    }); 
    $("img.on").click(function() { 
     alert('off'); 
     $(this).attr('class', 'off'); 
    }); 
}); 

Der Selektor arbeitet für Bilder in Ordnung, die den Klassennamen definiert haben in das ursprüngliche HTML-Dokument, jedoch nach dem Bearbeiten des Klassennamens mit jQuery, wird das img-Element nicht auf Selektoren antworten, die seine neue Klasse verwenden.

Mit anderen Worten, die obige Code ausgeführt wird, wenn Sie ein ‚off‘ img klicken, wird es die erste Funktion auslösen, und ändern Sie die Klasse zu ‚on‘. Ein erneutes Klicken auf dieses Bild löst jedoch nicht die zweite Funktion aus (wie ich es erwartet hätte), sondern löst die erste wieder aus. Es ist, als ob der Selektor das alte DOM statt der aktualisierten Version liest. Was mache ich hier falsch?

Firefox 3.6.3 - jQuery 1.4.2

Answer 1

können Sie .live() verwenden zu tun, was Sie wollen, wie folgt aus:

$(function() { 
    $("img.off").live('click', function() { 
    alert('on'); 
    $(this).attr('class', 'on'); 
    }); 
    $("img.on").live('click', function() { 
    alert('off'); 
    $(this).attr('class', 'off'); 
    }); 
}); 

Wenn Sie $(selector).click() tun sind, um die Elemente zu finden, die passen zu dieser Zeit und binden einen Handler an die click Ereignis ... wenn ihre Klasse später ändert es keine Rolle, der Handler ist angeschlossen. .live() funktioniert anders, kümmert sich eigentlich um den Selektor wenn das Ereignis passiert.

Auch abhängig von Ihrem Beispiel /, was Sie schließlich nach sind, so etwas wie .toggleClass() könnte es für Sie vereinfachen, wie folgt aus:

$(function() { 
    $("img.off, img.on").live('click', function() { 
    $(this).toggleClass('on off'); 
    alert($(this).attr('class')); 
    }); 
}); 

Answer 2

Versuchen mit live():

$(document).ready(function() { 
    $("img.off").live('click', function() { 
     alert('on'); 
     $(this).attr('class', 'on'); 
    }); 
    $("img.on").live('click', function() { 
     alert('off'); 
     $(this).attr('class', 'off'); 
    }); 
}); 

Answer 3

Sie müssen den Klickrückruf entweder neu binden, nachdem Sie die Klasse geändert haben, oder .live()