0

私は「ダイナミック」アコーディオンを持っています。「addBtn」をクリックすると、新しい要素が作成されます。各要素には、現在の要素を削除する「削除」ボタンがあります。

HTML

<div id="accordion">

                        <div id="aE">
                            <div id="aT" class="aT_val"> 
                                <h3></h3>
                            </div>

                            <div id="aC" class="aC_val">
                                <p></p>
                            </div>

                            <div id="deleteBtn" class="deleteBtn"><img src="images/del.png"></div>

                        </div>

                    </div>

JS

$('#addBtn').click(function() {
        count++;

        $('#accordion').append('<div id="aE' + count + '"><div id="aT' + count + '" class="aT_val"><h3></h3></div><div id="aC' + count + '" class="aC_val"><p></p></div><div id="deleteBtn' + count + '" class="deleteBtn"><img src="images/delete-button.png"></div></div>'); });

$('#deleteBtn' + count).click(function() {
        $('#aE' + count).remove();
    });

ただし、「deleteBtn」は要素「aE」を削除しません。これはどのように解決できますか？

4

2 に答える 2

0

'#aE' + count関数が作成されたときではなく、クリック時に評価されているためcount、ボタンが作成されたときの値ではなく、最後に使用された値になります。

于 2012-08-24T09:56:51.143 に答える
0

#deleteBtn の onclick コールバックは、親スコープとは異なるコンテキストで評価されています。

$('#deleteBtn' + count).click(function() {
    // this will always return a fixed number
    $('#aE' + count).remove();
});

これを試して

$('#deleteBtn' + count).click(function() {
    // this will return a correct id
    var cnt =  this.id.replace('deleteBtn', '');
    $('#aE' + cnt ).remove();
});
于 2012-08-24T10:02:20.733 に答える