Img Klick() nach Img ID ändern

Question

Entschuldigung für mein Englisch.

Ich habe eine Tabelle mit der Favoriten-Spalte, die ein Bild enthält: fav_on oder fav_off und seine ID ist fav_on oder fav_off.

Wenn ich klicke ändere ich die ID (wenn ich das DOM mit Firefox die ID richtig ändern), aber wenn ich noch einmal klicke, läuft das Ereignis mit der alten ID verbunden.

Kann mir jemand helfen?

danke

<table> 
    <tr id="1"> 
     <td id="fav_ali" data-fav_ico="0"><img src="img/tmp.png" id="fav_off" class="img_btn" title="add to fav"/></td> 
     <td id="des_ali" class="cg_ott">aaaa</td> 
    </tr> 
    <tr id="2"> 
     <td id="fav_ali" data-fav_ico="1"><img src="img/tmp.png" id="fav_on" class="img_btn" title="del from fav"/></td> 
     <td id="des_ali" class="cg_na">aaaaa</td> 
    </tr>  
</table> 

$('#fav_off').on("click", function (e) { 
    e.preventDefault(); 
    console.log("Fav Off click"); 
    //change DB... 
    this.id = "fav_on"; 
}); 

$('#fav_on').on("click", function (e) { 
    e.preventDefault(); 
    console.log("Fav On click"); 
    //change DB... 
    this.id = "fav_off"; 
}); 

Answer 1

Zum einen haben id Attribute zur Laufzeit nicht ändern, da sie statisch sein sollen. Verwenden Sie stattdessen Klassen.

Zweitens, der Grund, warum Ihr Code nicht wie erwartet funktioniert, ist, weil Sie die Event-Handler beim Laden anhängen. Die Änderung id hat keine Auswirkungen auf die Event-Handler, die bereits auf dem Element sind. Um das zu tun, was Sie benötigen, verwenden Sie einen delegierten Event-Handler. Versuchen Sie folgendes:

$(document).on('click', '.fav_off, .fav_on', function() { 
 
    if ($(this).hasClass('fav_off')) { 
 
    console.log('Fav Off click'); 
 
    } else { 
 
    console.log('Fav On click'); 
 
    } 
 

 
    $(this).toggleClass('fav_off fav_on'); 
 
    //change DB... 
 
});

.fav_on { 
 
    border: 1px solid #c00; /* just to make the effect more obvious */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr id="1"> 
 
    <td id="fav_ali" data-fav_ico="0"> 
 
     <img src="img/tmp.png" class="img_btn fav_off" title="add to fav" /> 
 
    </td> 
 
    <td id="des_ali" class="cg_ott">aaaa</td> 
 
    </tr> 
 
    <tr id="2"> 
 
    <td id="fav_ali" data-fav_ico="1"> 
 
     <img src="img/tmp.png" class="img_btn fav_on" title="del from fav" /> 
 
    </td> 
 
    <td id="des_ali" class="cg_na">aaaaa</td> 
 
    </tr> 
 
</table>

Answer 2

Sie dieses

$('.img_btn').on("click", function (e) { 
    e.preventDefault(); 
    //change DB... 
    console.log(this.id); 
    if (this.id == "fav_on") { 
    this.id = "fav_off"; 
    } else { 
    this.id = "fav_on"; 
    } 
});