1

最新の jQuery 1.x ライブラリの新しい仕様を読むと、.on動的に作成された jQuery 要素に対して機能するイベントをアタッチするために使用するように言われていますが、この作業をまったく行うことができないようです。私の$(document).ready機能では、次のものがあります。

jQuery:

$(".dropdown").on("click", function(event) {
    event.preventDefault();
    var type = $(this).text() == '[ Read more... ]' ? 'expand' : 'collapse';
    var theDiv = type == 'expand' ? $(this).parent().next("div") : $(this).parent().prev("div");
    var theId = $(this).attr("id");
    $(this).parent().remove();
    var vText = theId == 'reqMat' ? 'Every candidate is required to submit a headshot and candidate statement.' : 'To strengthen your candidacy and let people know what you\'re all about, we invite you to create a campaign video.';

    theDiv.animate({height: 'toggle'}, 500, function(){
        if (type == 'expand')
            theDiv.after('<p class="desc"><a href="#" class="dropdown" id="' + theId + '">[ Collapse Information... ]</a></p>');
        else
            theDiv.before('<p class="desc">' + vText + ' <a href="#" class="dropdown" id="' + theId + '">[ Read more... ]</p>');

        if (theId == 'optMat' && type == 'expand')
        {
            var sVidWidth = $("#sampleVideo").width();
            $("#sampleVideo").css({'height': (sVidWidth/1.5) + 'px'});
        }
        else if (theId == 'optMat' && type == 'collapse')
        {
            var iframe = $('#sampleVideo')[0];
            var player = $f(iframe);
            player.api('pause');
        }

        if (theId == 'reqMat' && type == 'expand')
        {
            handleBullets();
        }
    });
});

これで[ Read more... ]テキストがドロップダウンされ、[ Collapse Information... ]展開されている実際のコンテンツの下にある文字列に変換されます。しかし、[ Collapse Information... ]テキストをクリックすると、何も折りたたまれず、代わりにページの上部に移動するため、 が表示されますhref="#"が、を使用すると、 が正しく適用され.onたときに発生しないようにする必要があります??event.preventDefault();

ここにあるjQueryライブラリを使用しています： <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

私の HTML は次のようにレイアウトされています。

<h4>Header 1</h4>
<p class="desc">Brief description. <a href="#" id="reqMat" class="dropdown">[ Read more... ]</a></p>
<div style="display: none;">
    <p>More information is in here...</p>
</div>
<h4>Header 2</h4>
<p class="desc">Brief description. <a href="#" id="optMat" class="dropdown">[ Read more... ]</a></p>
<div style="display: none;">
    <p>More information is in here...</p>
</div>

初めてクリックしたとき[ Collapse Information... ]は機能しますが、2回目に表示されるとまったく機能しません。したがって、動的に作成された にアタッチしていません<p class="desc"><a href="#" class="dropdown" id="' + theId + '">[ Collapse Information... ]</a></p>。

なぜだめですか？の代わりに使用する必要があるものは他にあり.onますか? .livejQuery 1.7以降、使用されなくなっ たことは知っています。.click私もすでに試したので、どちらも機能しません。他にどのようなオプションがありますか?

4

1 に答える 1

3

デリゲート イベント ハンドラーを登録するメソッドを取得するにはon(メソッドが行うのと同じようにdelegate)、要素のセレクターを指定し、それを既に存在する要素に適用する必要があります。

例えば：

$("body").on("click", ".dropdown", function(event) {

"body"可能な限りスコープを縮小するために、ではなく、動的に追加される要素にできるだけ近い親要素に適用することをお勧めします。それ以外の場合は、ページで発生するすべてのクリックに対してセレクター".dropdown"を評価する必要があります。通常、動的コンテンツを追加する包含要素を使用します。

于 2013-07-21T23:30:23.360 に答える