0

私はjavascript/jquery関数を持っています:

function deleteRecordByClick(){
    $('.deleteRecord').click(function(){
        alert("deleting record");
        var confirmMsg = confirm('Are you sure you want to delete record?');    
        if(confirmMsg){  
            alert(idRecordToDelete);  // fires the correct id to delete
            ajaxDeleteRecord(idRecordToDelete); //my own ajax working properly      
        }               
    });
}

アコーディオン セットからレコードを削除します。各アコーディオンは動的に作成され、「.deleteRecord」クラスのボタンがあります。関数は適切に呼び出されますが、N レコードを追加すると、ランダムなアコーディオンをクリックすると、明らかにデータベースの削除が最初に正しく実行されたとしても関数が N 回呼び出されますが、N 個の確認メッセージが表示されます。レコードが作成されるときに関数を呼び出します。

function addNewAccordion(){
   //.... my code to add accordion with
   // <h3 ... class="deleteRecord">
   deleteRecordByClick(); //here I call the function
}

関数を破棄して再作成する方法、または問題を解決するためのより良い方法はありますか? ありがとう

4

2 に答える 2

3

アコーディオンを作成するたびに関数を実行すると、以前に作成された各アコーディオンに別のイベントハンドラーが追加されます。

最初にすべてのアコーディオンを作成してから関数を1回呼び出すか、特定のアコーディオン要素への参照を各呼び出しの関数に送信できます。

deleteRecordByClick(accordion);

関数では、参照を使用して、そのアコーディオン内で検索を制限します。

function deleteRecordByClick(accordion){
  $('.deleteRecord', accordion).click(function(){
  ...
}
于 2012-10-27T09:04:41.060 に答える
1

イベント委任を使用する必要があります。

$(addedAccordion).on('click', '.deleterecord', function(){/*stuff to delete entry here */})

アコーディオンの各要素にリスナーを追加する代わりに、addNewAccordion 内で。

function addNewAccordion() {
    //.... my code to add accordion with
    // <h3 ... class="deleteRecord">
    // var addedAccordion = ... get a reference to the accordion
    $(addedAccordion).on('click','.deleterecord', function() {
        alert("deleting record");
        var confirmMsg = confirm('Are you sure you want to delete record?');
        if (confirmMsg) {
            alert(idRecordToDelete); // fires the correct id to delete
            ajaxDeleteRecord(idRecordToDelete); //my own ajax working properly      
        }
    });
}
于 2012-10-27T09:11:53.167 に答える