如何透過jquery新增html 碼並生效其css效果

jquery3.1.1 css javescript

alanotmt 2023-01-13 10:12:52 ‧ 745 瀏覽

分享至

先附上codepe:https://codepen.io/alanotmt/pen/PoRQpKB
如題，我透過jquery新增html碼，
但我新增選項並沒有套用按一下active，
再按一下取消active這功能，
請問要如何才能在新增選項時並能套用原本選項的功能?

登入發表討論

直播研討會

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

直播中

2 個回答

froce

iT邦大師 1 級 ‧ 2023-01-13 10:52:37

最佳解答

var count = 0
function addli(){
   count+=1
   // 動態產生的DOM不會自動綁定事件，需要做Delegate 
   $('#navi').append('<li><a>'+count+'</a></li>');
}

function toggleActive(elm){
   const a = $(elm).children("a")
    if(a.hasClass('li a active')){
      a.removeClass("li a active");
    }
    else {
      a.addClass("li a active");
    }
}

// jQuery Delegate:在父元素綁定事件，透過事件傳遞機制，到指定的子元素後，才會觸發事件。
  $('#navi').on("click", "li", function(){
    toggleActive(this)
 });

回應 3
分享
檢舉

alanotmt iT邦新手 4 級 ‧ 2023-01-13 13:30:31 檢舉

好簡單明瞭的註解，我懂了謝謝，不過為什麼我再新增一個button用來記錄active的就變成 "0":{}

function addToCartDetails() {
    var button = document.getElementById("navi").parentElement
    var shopItem = button.getElementsByClassName('active')
    console.log(shopItem)
}

froce iT邦大師 1 級 ‧ 2023-01-13 13:36:09 檢舉

你要用瀏覽器的F12看，不要用codepen的console看。

alanotmt iT邦新手 4 級 ‧ 2023-01-13 13:47:49 檢舉

喔喔，了解謝謝

登入發表回應

iT邦新手 2 級 ‧ 2023-01-13 10:29:37

後面新增的DOM沒有綁定到onclick事件
如果照你原本的code改我可能會這樣寫：

var count = 0
function addli(){
   count+=1
   var button = document.createElement("li")
   var a = document.createElement("a")
   a.innerText = count
   a.onclick = function(){
     if($(this).hasClass('li a active')){
       $(this).removeClass("li a active");
     }
     // 否則 add 'active'
     else {
       $(this).addClass("li a active");
     }
   }
   button.append(a)
   $('#navi').append(button);
}