0

===更新===

テンプレートから削除the style="display: none;して、以下で推奨されている方法を適用すると、他のリスト項目をクリックすると空のコンテナが起動します。他に何ができますか？

jQuery と JSON を使用して実行時に動的に作成される ul リストがあります (インライン HTML の使用はテンプレートです)。ユーザーがリスト項目 (#navItem) をクリックしたときに背景の CSS スタイルを変更する必要があります。インライン クラスから .appentTo() など、月の下で考えられるすべてを試しました。以下にあるものは、ハードコードされた要素に対しては正常に機能しますが、動的に読み込まれたコンテンツでは何も機能しないようです。さらに紛らわしいのは、li タグ内の要素のクラスが開始することです...???

どんな助けでも大歓迎です。以下は私のコードスニペットです。サンクス。

HTML:

<div id="navScrollContainer" class="navContentPosition">
    <ul id="navContent">
    // Display as 'None' to prevent a empty containter from showing -->
        <li id="navItem" class="ulFx" style="display: none;">//<-THIS NEEDS TO CHANGE ONCLICK!!
            <a class="navA">
            <h1 class="navH1">.</h1>
            <h2 class="navH2">.</h2>
            <p class="navP">.</p>
            <hr class="navHR" />
        </li>
    </ul>
</div>
<script type="text/javascript">
    $('#navScrollContainer').on('click', '.ulFx', function() {
        $(this).addClass("liFx");
    });
</script>

これは、DOM にデータをリストとして挿入する関数です。

function loadNav(url, container, appendE) {
    $.getJSON(url, function(data) {

        $.each(data.items, function() {
            var newItem = $('#' + container).clone();
            // Now fill in the fields with the data
                    newItem.addClass('ulFx');
            newItem.find("h1").text(this.label);
            newItem.find("h2").text(this.title);
            newItem.find("p").text(this.description);
            newItem.find("a").attr("href", this.gotoURL);
            newItem.children().appendTo('#' + appendE);
        });

        $('#navHeaderTitle').text(data.listTitle);
        iniScroll('scrollNav', 'navScrollContainer');
        var target = data.targetKey;
        // transition("#" + pageName, "show");
    });
};

ユーザーが項目をクリックしたときに (その項目でのみ) 発生する必要がある CSS:

@-webkit-keyframes
liBG {from {
    background-color: transparent
}
50% { background-color: rgba(51,102,255,0.15); }
to {
    background-color: transparent
}
}

.liFx {
    -webkit-animation-name: liBG;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

li アイテムに与えられた Class 属性:

.navH1 {
    font-size: 18px;
    color: #FFA500;
    text-decoration: underline;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 15px;
}
.navH2 {
    font-size: 16px;
    color: #999999;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 25px;
    font-weight: bold;
}
.navP {
    color: #888;
    font-size: 14px;
    text-align: justify;
    margin-top: 5px;
    margin-bottom: 16px;
    margin-left: 25px;
    margin-right: 10px;
}
.navA {
    text-decoration: none;
}
.navHR {
    border: none;
    background-color: #336;
    height: 1px;
}
4

4 に答える 4

3

これにより、動的要素が監視されます。

$(".liFx").live("click", function() {
  $(this).addClass("liBG");
});
于 2012-04-06T17:21:23.413 に答える
3

クリック ハンドラーが表示されないので、推測するしかありません。ただし、一般的に問題が動的コンテンツに関連し、それらが刺激に反応する場合、問題はハンドラーのアタッチ方法にあります。

.click()、またはを使用する.trigger('click')と、ハンドラーはこれらの関数を呼び出している要素に直接適用されます。つまり、要素が現在存在しない場合、要素はハンドラーを受け取りません。

これを回避する方法は、常に存在する親要素にイベント リスナーをアタッチし、動的な子要素から伝播するイベントを監視することです。これは を見て手動で行うこともできますがevent.target、いつものように jQuery を使用すると簡単に行うことができます。

これを行うための最新のjQueryの方法は、.on()（ドキュメント）を使用しています：

$('#someparent').on('click', '#childselector', function() {
   // my handler code
});

次に、jQuery は にハンドラーをアタッチし、#someparentをターゲットとしたクリックを検出すると#childselector、それを起動します。

クラスを の子に適用し、#navContent常に#navContent存在する場合は、次のようにします。

$('#navContent').on('click', 'li', function() {
     $(this).addClass("liFx");
});

も動的である場合#navContentは、単純に DOM ツリーの上位に移動します。

li補足として、の ID が であることに気付きましたnavItem。これは、ID というよりはクラスのように聞こえます。複数の を使用する場合navItem、すべてが同じ ID を持つことはできません。これがクラスの目的です：

<li class="navItem liFx" style="display: none;">
于 2012-04-06T17:21:56.787 に答える
0

どこに問題があるのか​​ わかりませんが、あなたはそのようなことをしようとしています：

$("#navlink").on('click', function() {
     $("#yourselector").css("backgroundColor", "#ddd"); //change the color
});
于 2012-04-06T17:22:34.837 に答える
0

上記の Jeff B の回答とともに、関数に別の div と addClass() メソッドを追加しました。クラスがタグにハードコードされている場合、機能しません。

<ul id="navContent">
    <li id="navItem" style="display: none;">
        <div>//ADDED THIS TAG TO EXCEPT THE CLASS
            <a>
                <h1>.</h1>
                <h2>.</h2>
                <p>.</p>
                <hr/>
            </a>
        </div>
    </li>
</ul>

私のjsファイルで：

$.each(data.items, function() {
    var newItem = $('#' + container).clone();
    // Now fill in the fields with the data
    newItem.find("div").addClass("ulFx");//ADDED THIS METHOD
    newItem.find("h1").text(this.label);
    newItem.find("h2").text(this.title);
    newItem.find("p").text(this.description);
    newItem.find("a").attr("href", this.gotoURL);
    newItem.children().appendTo('#' + appendE);
});
于 2012-04-06T21:20:25.907 に答える