event 設定好了，換了 attr id 重新呼叫 event，卻無法運行？

js jquery jquery3.1.1 css3 html5

火爆浪子 2018-06-28 18:22:26 ‧ 1923 瀏覽

分享至

$(function() {

  $('#remove_favorite_btn').click(function (e){

    e.preventDefault();

    $.ajax({
      type: "GET",
      url: ,
      success: function(data){

        $('#remove_favorite_btn').attr('id', 'add_favorite_btn');

      }
    });

  });

  $('#add_favorite_btn').click(function (e){

    e.preventDefault();

    $.ajax({
      type: "GET",
      url: ,
      success: function(data){

        $('#add_favorite_btn').attr('id', 'remove_favorite_btn');
      }
    });

  });

});

都在同一個頁面
當 add_favorite_btn click 後，成功則將 add_favorite_btn 的 id 屬性改為 remove_favorite_btn
此時我在按下去，照我的想法是可以直接啟動 remove_favorite_btn event
但結果他還是在運行 add_favorite_btn 的活動，而不是 remove_favorite_btn
怎麼會這樣？

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

froce

iT邦大師 1 級 ‧ 2018-06-28 21:19:10

最佳解答

遇到你想綁定事件到動態新增/變動的DOM上的時候，你要使用 event delegate。
https://jsbin.com/yomupamevi/edit?html,console,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</head>
<body>
  <button id="add">add</button>
</body>
</html>

<script>
  $('body').on('click', '#add',function(){
    $(this).attr('id', 'remove');
    console.log("1");
    
  });
  
  $('body').on('click', '#remove',function(){
    $(this).attr('id', 'add');
    console.log("2");
  });
</script>

你可以利用像這樣，用父層級DOM傳遞事件綁定到新增/變動的DOM，但是如果父層級直接用document或body綁定，DOM數量一多，會有效能問題，盡量使用最近的父層級是原則。

下面解釋的蠻清楚的。
https://ithelp.ithome.com.tw/articles/10120565

回應 3
分享
檢舉

froce iT邦大師 1 級 ‧ 2018-06-28 21:33:58 檢舉

附帶一提，我不太建議像這樣一個btn重複使用，建議你還是兩個btn一個隱藏，去做切換。
或是寫出切換功能的後端，這樣你後端可以少寫一個功能，反正就是後端資料庫取值，如果沒有就新增，有就移除而已。

火爆浪子 iT邦研究生 1 級 ‧ 2018-06-28 21:50:19 檢舉

謝謝，發現這很像是按讚功能，哈哈，如果是你你會怎麼做？簡單又穩定

froce iT邦大師 1 級 ‧ 2018-06-28 22:10:06 檢舉

就像我上面說的一樣，用個切換按鈕，去省一個後端的功能。
反正這種功能不會太複雜。

複雜的功能我就會直接做兩個，利用隱藏去切換。

登入發表回應

wingkawa

iT邦新手 3 級 ‧ 2018-06-28 21:00:59

你可以當作是按鈕即使改變了id，但按鈕仍然是原本那個按鈕，綁在它身上的行為自然不會有改變

下面的code可以參考看看

$('#add_favorite_btn').click(function (e) {
    // 新增按鈕按下去之後，改成移除按鈕
	changeToRemove(this);
});

/**
 新增變成移除
*/
function changeToRemove(btn) {
	// 這邊傳進來的 btn 還不是 jquery 物件
	// 所以用 $(btn)
	$(btn).attr('id', 'remove_favorite_btn');
	// 由於jquery綁定事件會一直疊加下去，所以先解綁再綁定要做的事
	$(btn).unbind('click').click(function (e) {
		e.preventDefault();
        // 已經解除原本的行為了，這邊綁定成正確的行為: 移除按鈕按下去會變成新增按鈕
		changeToAdd(btn);
	});
}

/**
 移除變成新增
*/
function changeToAdd(btn) {
	$(btn).attr('id', 'add_favorite_btn');
	$(btn).unbind('click').click(function (e) {
		e.preventDefault();
		changeToRemove(btn);
	});
}