1

给出以下标记

<ul class="ulGreen">
                <li><b>On-Board systems - Road Vehicle</b><span style="color:black;"> (See an installation picture<a href="#" data-rel="onBoardVehiclepicdisplay">here</a>)</span> </li>
                <li><b>On-Board systems - Marine Vessel</b><span style="color:black;"> (See an installation picture<a href="#" data-rel="onBoardVesselpicdisplay">here</a>)</span> </li>
                <li><b>On-Board systems - FuelingBarge</b><span style="color:black;"> (See an installation picture<a href="#" data-rel="onBoardFuelBargepicdisplay">here</a>)</span> </li>

            </ul>

和以下脚本

<script>
    $(document).ready(function() {

        $('.ulGreen').delegate(' li span a').click(function() {
            var divID = $(this).attr("data-rel").text;
            alert(divID);

        });
    });

</script>

divID 应该包含来自单击标签的 data-rel 属性的文本，但它不包含，或者您不会阅读此内容。HTML 完全如上所示呈现。

4

2 回答 2

1

首先，用于.data()引用data-属性。

但真正的问题在于delegate()以这种方式使用。使用时find()，它工作得很好（见jsFiddle）：

$(document).ready(function() {
    $('.ulGreen').find('li span a').click(function() {
        var divID = $(this).data("rel");
        alert(divID);
    });
});​

如果您需要实时更新事件（并且正在使用 jQuery 1.7+），请使用.on()（请参阅jsFiddle）：

$(document).ready(function() {
    $('.ulGreen').on('click', 'li span a', function() {
        var divID = $(this).data("rel");
        alert(divID);
    });
});​
于 2012-10-28T22:39:45.267 回答
0

该text()方法返回一个没有text()方法的字符串，只需省略该方法调用：

$('.ulGreen').delegate('li span a').click(function(e) {
    var divID = $(e.target).attr("data-rel");
    alert(divID);
});​

JS 小提琴演示。

e.target指的是被点击的元素（事件的目标， e），而this（和 jQuery 对象$(this)）指的是ul它本身。

于 2012-10-28T22:35:52.653 回答