img id更改後的圖片點擊（）

我有一個包含圖像的收藏夾列的表：fav_on或fav_off，它的id是fav_on或fav_off。

當我點擊我更改id（如果我檢查與Firefox的DOM正確更改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"; 
});

來源

2016-10-06 pigobyte

不要使用ID。這不是它的目的。你應該使用這個類。另外，您不能在頁面上擁有多個ID。 'fav_ali'和'des_ali'也應該是類。第三，ID不能以數字開頭。您需要修改表格行的ID，以便以字母開頭。 – Styphon

首先不要在運行時修改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>

來源

2016-10-06 14:48:47

超級！謝謝！ – pigobyte

我使用$（「。img_btn＃btn_fav_on_off」）的解決方案。click（function（）{..因爲這個表在一個複雜的對話框中，由父頁面加載.. – pigobyte

oops！..新問題..如果我動態地添加一個新行，點擊新行圖像不起作用:(你知道如何幫助我 – pigobyte

你能做到這一點

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

來源

2016-10-06 14:58:04

img id更改後的圖片點擊（）

回答

相關問題