img id変更後のImg click（）

Question

申し訳ありません私の英語です。

私はfav_onまたはfav_offというイメージを含むお気に入りの列を持つテーブルを持っています。そのidはfav_onまたはfav_offです。

クリックするとidを変更します（FirefoxでIDを正しく変更するとidが正しく変更されます）。ただし、再度クリックすると、古いIDに接続されたイベントが実行されます。

誰かが私を助けることができますか？

は、それらが静的であることを意味しているとして、まず、実行時にid属性を修正していない

<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

ありがとうございました。代わりにクラスを使用してください。

第2に、ロード時にイベントハンドラをアタッチするため、コードが期待通りに機能しない理由があります。変更する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"; 
    } 
});