javascript - Read the data-option value on select

Question

Using JQuery, How can I read the data-option value when an option is clicked/selected from List.

<span data-name="" data-select="dropdown" class="btn-group dropdown dropdown-select">
    <a data-target="#" data-toggle="dropdown" class="btn dropdown-toggle">Select User</a>
    <a data-target="#" data-toggle="dropdown" class="btn dropdown-toggle end"><i class="icon-arrow-down"></i></a>
    <ul class="dropdown-menu">        
        <li class="active"><a data-option="1D" href="#">One Day</a></li>
        <li class=""><a data-option="1W" href="#">One Week</a></li>
        <li class=""><a data-option="2W" href="#">Two Weeks</a></li>

     </ul>
</span>

Answer 1

$("ul.dropdown-menu a").click(function(){
    alert($(this).data("option"));
});

Answer 2

试试这个

$("ul.dropdown-menu a").on("click",function(){
     alert($(this).data("option"));
});

Asclick在加载 dom 后添加元素时不起作用。

Answer 3

你可以做

<li class="active"><a data-option="1D" href="#" onclick="getDataOption(this);">One Day</a></li>

var getDataOption = function (node) {
    var value = node.getAttribute("data-option");
    console.log(value);
    return value;
};

Answer 4

$("ul.dropdown-menu li").click(function(){

   alert($(this).attr("data-option"));
});