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 に答える