Question

抱歉我的英文。

我有一个包含图片的收藏夹列的表格：fav_on或fav_off，其ID为fav_on或fav_off。

当我点击时我更改了id（如果我用firefox检查DOM，id正确更改），但如果我再次点击，则连接到旧ID的事件会运行。

有人可以帮助我吗？

谢谢

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

{{1}}

Answer 1

首先，不要在运行时修改id属性，因为它们是静态的。改为使用类。

其次，您的代码没有按预期工作的原因是因为您在加载时附加了事件处理程序。更改id与元素上已有的事件处理程序无关。要执行您需要的操作，请使用委派的事件处理程序。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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";
  }
});

img id更改后点击（）

2 个答案: