Witam, mam dziwny problem z jQuery.
Mam zrobiony program w którym ustalam sobie wymiary tabeli ("panel z diodami") i klikając na poszczególne komórki zmieniam im tło("zapalam diody"). Wszystko działa jak należy, ale do czasu gdy zmienię rozmiar tabeli. Po zmianie rozmiaru nie da się zmieniać styli komórek("zapalić diod"). Działa to tylko za pierwszym załadowaniem strony, gdzie rozmiar jest default.
Tabela jest generowana funkcją.
O to kod:
//Funkcja do generowania tabeli
function createDynamicTable(tbody, rows, cols) {
if (tbody == null || tbody.length < 1) return;
licznik_rows=0;
licznik_cols=0;
for (var r = 1; r <= rows; r++) {
var trow = $("");
if(licznik_rows%2==0) licznik_cols=0;
else licznik_cols=1;
for (var c = 1; c <= cols; c++) {
if(licznik_cols%2==0){
$("")
.addClass("LED")
.data("col", c)
.appendTo(trow);
}
else{
$("")
.addClass("NOT_LED")
.data("col", c)
.appendTo(trow);
}
licznik_cols++;
}
trow.appendTo(tbody);
licznik_rows++;
}
}
var wybrany_kolor="empty";
//Zmiana rozmiaru
$(function() {
$( "#dimension-select-x" ).change(function() {
var valueX;
$( "#dimension-select-x:selected" ).each(function() {
valueX=$("#dimension-select-x").val();
});
$("#leds tbody").remove();
$("#leds").append("</tbody>");
createDynamicTable($("#leds_body"), $("#dimension-select-x").val(),$("#dimension-select-y").val());
}).trigger( "change" );
$( "#dimension-select-y" ).change(function() {
var valueY;
$( "#dimension-select-y:selected" ).each(function() {
valueX=$("#dimension-select-y").val();
});
$("#leds tbody").remove();
$("#leds").append("</tbody>");
createDynamicTable($("#leds_body"), $("#dimension-select-x").val(),$("#dimension-select-y").val());
}).trigger( "change" );
//Wybranie koloru
$("#led-off").click(function(){
wybrany_kolor="empty";
$("#led-color-menu div").removeClass("color-choosen");
$(this).addClass("color-choosen");
});
$("#led-red").click(function(){
wybrany_kolor="red";
$("#led-color-menu div").removeClass("color-choosen");
$(this).addClass("color-choosen");
});
//Zapelenie diody
var isMouseClicked=false;
$('.LED').click(function(){
if(wybrany_kolor=="red")$(this).css("background-image","url(led_red2.png)");
else $(this).css("background-image","url(led_empty.png)");
})
.mousedown(function(){ isMouseClicked=true;})
.mousemove(function () {
if(isMouseClicked){
if(wybrany_kolor=="red")$(this).css("background-image","url(led_red2.png)");
else $(this).css("background-image","url(led_empty.png)");
}
});
$(document).mouseup(function () {
isMouseClicked=false;
})
});
W czym jest błąd? Pomóżcie.
Pozdrawiam i z góry dzięki :)