Img click() после изменения img ID

Question

Извините за мой английский.

У меня есть стол со столбцом фаворитов, который содержит изображение: fav_on или fav_off, а его id - fav_on или fav_off.

Когда я нажимаю, я меняю идентификатор (если я проверяю DOM, если firefox правильно изменил идентификатор), но если я снова нажму, произойдет событие, связанное со старым идентификатором.

Может кто-нибудь мне помочь?

спасибо

<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

Во-первых, не изменить id атрибуты во время выполнения, поскольку они предназначены, чтобы быть статичным. Вместо этого используйте классы.

Во-вторых, причина, по которой ваш код не работает, поскольку вы ожидаете, потому что вы прикрепляете обработчики событий при загрузке. Изменение id не влияет на обработчики событий, которые уже находятся на элементе. Чтобы выполнить то, что вам нужно, используйте делегированный обработчик событий. Попробуйте это:

$(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

вы могли бы сделать это

$('.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"; 
    } 
});