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更改后的图片点击（）

回答

相关问题