iT邦幫忙

0

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

$(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
怎麼會這樣?

2 個回答

0
froce
iT邦高手 2 級 ‧ 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

froce iT邦高手 2 級 ‧ 2018-06-28 21:33:58 檢舉

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

asys0512 iT邦新手 1 級 ‧ 2018-06-28 21:50:19 檢舉

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

froce iT邦高手 2 級 ‧ 2018-06-28 22:10:06 檢舉

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

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

1
wingkawa
iT邦新手 4 級 ‧ 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);
	});
}

我要發表回答

立即登入回答