js中事件綁定,$("body").on("click")與$("").click()區別

<dl>
     <dt>性別</dt>
     <dd>
            <a href="javascript:void(0);" class="sex_icon set_icon"></a><p>男</p>
            <a href="javascript:void(0);" class="sex_icon set_icon"></a><p>女</p>
            <a href="javascript:void(0);" class="sexon_icon set_icon"></a><p>保密</p>
            </dd>
</dl>

這是一個選擇 男、女、保密 的功能
但 下面的 js 一個有問題，一個成功：

有問題、有bug的：

 $(".sex_icon").click(function(){
        $(this).removeClass().addClass("sexon_icon set_icon").siblings("a").removeClass().addClass("sex_icon set_icon");      
    });

    或者是：

    $(".sex_icon").click(function(){
        $(this).removeClass("sex_icon").addClass("sexon_icon").siblings("a").removeClass("sexon_icon").addClass("sex_icon");

    });

下面是成功的、無問題的：

 $("body").on("click",".sex_icon",function(){
         $(this).removeClass("sex_icon").addClass("sexon_icon").siblings("a").removeClass("sexon_icon").addClass("sex_icon");
    });


解析原因：

那是因為另外兩個選項的點擊事件代碼里面給的。也就是動態給的sex_icon樣式。但是element.click這種寫法不支持給動態元素或者樣式重新綁定事件。

支持給動態元素和屬性綁定事件的是live和on，其中live在JQUERY 1.7之后就不推薦使用了。現在主要用on，使用on的時候也要注意，on前面的元素也必須在頁面加載的時候就存在於dom里面。動態的元素或者樣式等，可以放在on的第二個參數里面。