iT邦幫忙

0

jquery 無法新增CSS的效果

  • 分享至 

  • xImage

為了版面的美觀,用jquery-ui做了按鈕點按式的checkbox效果,
但當checkbox是用jquery產生時,就不會有jquery-ui的按鈕效果,只是傳統的勾選式的小框checkbox
範例如:https://jsfiddle.net/zzhsu20/wbdv6uyr/18/

請問有辨法讓jquery產生的表單也能套用jquery-ui的效果嗎?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
Homura
iT邦高手 1 級 ‧ 2019-05-02 10:44:05
最佳解答

因為你是使用Jquery UI的動作對所有checkbox套用class
所以你只要新增完再執行一次套用就行了

$("#add_checkbox").click( function() {
    var add = '<label for="checkbox-nested-3">3 Queen<input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3"></label>';
    $("#checkbox_block").append(add);
    
    // 對所有#checkbox_block input套用樣式
    $( "#checkbox_block input" ).checkboxradio();
})
zzhsu20 iT邦新手 5 級 ‧ 2019-05-02 11:20:59 檢舉

感謝Homura兄的解釋,那如果如下的CSS效果,是哪裡出了問題呢?

不一樣的CSS效果:
https://jsfiddle.net/zzhsu20/b9wpnjyr/9/

Homura iT邦高手 1 級 ‧ 2019-05-02 13:11:01 檢舉

zzhsu20
你應該要新增在funkyradio的div裡面才對
可是你新增在外面所以沒效
改成

$(".funkyradio").append(add);

就OK了
建議你多用F12開法者工具看看DOM結構的狀況
這樣你會比較容易進步

zzhsu20 iT邦新手 5 級 ‧ 2019-05-03 13:15:53 檢舉

感謝Homura兄的教學與建議,門外漢,的確對jquery不太熟,有很大的進步空間,再次感謝。

我要發表回答

立即登入回答