0

Jquery で作成したアコーディオン メニューがあります。

    <script>
$(document).ready(function() {
/*Accordian Script for the Request New Appraisal Panel*/
$('.accordian_item').hide();
$('.accordian_item').first().slideDown();

$('.accordian_trigger').click(function(event) {
    event.preventDefault();
    $(this).parent().find('.accordian_item').slideToggle();
});
});
</script>

ここで、追加のアコーディオン項目をアコーディオン ボックスに動的に追加できるようにしたいと考えています。これは次のように行いました。

<script>

$('#add_contact_btn').click(function(event) {
    event.preventDefault();

    var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/><input type="text"/><br/><label>Last Name</label><br/><input type="text" /><br/><label>Home Number</label><br/><input type="text"/><br><label>Work Number</label><br/><input type="text"/><br><label>Cell Number</label><br/><input type="text"/><br></div></div>';

    $('#accordion_container_box').append(large);


});
</script>

折りたたみボタンをクリックしても、動的に生成されたアイテムが折りたたまれないことを除いて、これは完璧に機能します。既存のアコーディオン項目は引き続き機能します。何らかの理由で、動的に作成されたリンクに対して Jquery がトリガーされないようです。これを修正する方法はありますか？

ところで、これが基本的な HTML 構造です。

<div id="accordion_container_box">

            <div class="accordian_container">
                <a href="#" class="accordian_trigger"><h4>Borrower's Information</h4></a>
                <hr/>
                <div class="accordian_item">
                <label> First Name</label><br/>
                <input type="text"/><br/>
                <label>Middle Name</label><br/>
                <input type="text"/><br/>
                <label>Last Name</label><br/>
                <input type="text" /><br/>
                <label>Home Number</label><br/>
                <input type="text"/><br>
                <label>Work Number</label><br/>
                <input type="text"/><br>
                <label>Cell Number</label><br/>
                <input type="text"/><br>
                </div>
            </div>

            <div class="accordian_container">       
                <a href="#" class="accordian_trigger"><h4>Co-Borrower's Information</h4></a>
                <hr/>
                <div class="accordian_item">
                <label> First Name</label><br/>
                <input type="text"/><br/>
                <label>Middle Name</label><br/>
                <input type="text"/><br/>
                <label>Last Name</label><br/>
                <input type="text" /><br/>
                <label>Home Number</label><br/>
                <input type="text"/><br>
                <label>Work Number</label><br/>
                <input type="text"/><br>
                <label>Cell Number</label><br/>
                <input type="text"/><br>
                </div>
            </div>

        </div>

            <a href="#" id="add_contact_btn">+ Additional Contact</a>
4

2 に答える 2

1

デフォルトでは、要素へのバインドイベントは、バインドの実行時に存在するノードにのみ影響します。イベント委任を使用することにより、イベントがバブルする組み込みの方法を利用できます。jQuery <1.7はdelegateandメソッドでこれを行い、jQuery 1.7は、すべてのイベントハンドラーを単一のAPIに統合liveするメソッドを追加しました。on

たとえば、次のコマンドを使用して、ノードaccordian_triggerがいつ作成されたかに関係なく、クラスがのノードでのすべてのクリックを処理できます。

​$(document).on('click', '.accordian_trigger', function() {
    //whatever you need to do
});​​​​​​​​​​​

onclickこれにより、イベントハンドラーがそれ自体にアタッチされdocumentます。DOMでクリックが発生すると、イベントが発生したノードから、に到達するまでその親とその親にバブルアップしますdocument。次に、jQueryは、の2番目のパラメーターとして渡されたセレクターと一致するノードでイベントが発生したかどうかonを確認します。この場合、ノードのクラスが。であるかどうかを確認しますaccordian_trigger。実行する場合は、function渡されたものを3番目のパラメーターとして実行します。

document効率を上げるために、すべてのノードが含まれることがわかっている親ノードに置き換えることをお勧めしますaccordian_trigger。それ以外の場合は、すべてのクリックがまでバブルし、documentクリックされたノードにaccordian_triggerクラスがあるかどうかを確認します。これは、特に大きなDOMがある場合は、コストがかかる可能性があります。

于 2012-05-25T19:28:41.200 に答える
1

動的に作成されたコンテンツでは .live('click'... を使用する必要があります。

于 2012-05-25T19:25:16.943 に答える