jQuery获取返回未定义的数据属性

Question

I am trying to get the value of data-scanID from the clicked tag and store it inside a variable called scanID but the alert comes up undefined.

$("#trucklist").click(function(event) {
    var scanID=$(event.target).data("scanID");
    alert(scanID);
});

The html looks something like this:

<ul id="trucklist">
    <li data-scanID=*somedata*>
        <ul>
            <li>*stuff*</li>
            <li>*stuff*</li>
            <li>*stuff*</li>
            <li>*stuff*</li>
            <li>*stuff*</li>
        </ul>
    </li>
    <li data-scanID=*somedata*>
        <ul>
            <li>*stuff*</li>
            <li>*stuff*</li>
            <li>*stuff*</li>
            <li>*stuff*</li>
            <li>*stuff*</li>
        </ul>
    </li>
    <li data-scanID=*somedata*>
        <ul>
            <li>*stuff*</li>
            <li>*stuff*</li>
            <li>*stuff*</li>
            <li>*stuff*</li>
            <li>*stuff*</li>
        </ul>
    </li>
</ul>

Answer 1

You are targetting ul . Try this:

$("#trucklist > li").click(function(event) {
    var scanID=$(this).data("scanID");
    alert(scanID);
});

The above will target the trucklist 's child li and alert you its data .

Also, I would suggest you to wrap the attribute's value within quotes.

Also, data attributes cannot contain capital letters. So change them or it will not work.

Demo