1

実際にそれを解決する方法がわからないという質問がありました。基本的には、データを引き出して Web に追加し、各データに独自の div ボタンを割り当てます。これは削除および更新され、クリックするたびにすべてが削除され、再追加されますデータ、コードは以下の通りです

function DrawData(){ var txtHd = $('input[id$="hidText1"]').val(); 
if (typeof(txtHd) != "undefined" || txtHd != "") //if have value
{ 
    var sSplit = txtHd.split(sDelimiter);
    var i;
    var div1, div2, div3, div4, div5, row1, comment;
    for (i=0;i<=sSplit.length-1;i++){
        if (sSplit[i].trim() == "") { return true; }
        comment = "";
        iAdd1 = i + 1;
        div1 = "<div class=container><div id=" + sSplit[i] +" class=number>" + iAdd1 + "</div>";
        div2 = "<div class=stage>Level " + iAdd1 + "</div>";
        div3 = "<div class=name>" + sSplit[i] + "</div>";
        div4 = "<div id=rem" + iAdd1 +" class=rem>remove</div>";
        div5 = "<div id=upd" + iAdd1 +" class=upd>update</div>";;
        div6 = "<div class=drfm>Comment: " + comment +  "</div></div>";

        row1 = div1 + div2 + div3 + div4 + div5 + div6;
        $('#dtdr').append(row1);
        $('#errmsg').fadeOut();
        removeValue(); //add remove function
        updateValue(); //add update function into the div
    }
}}

function updateValue(){
$('.upd').on('click', function(){ 
    var cLb=$('input[id$="hidText1"]').val();
    var updName = $(this).parent().find('.name').text();
    var repName = $('input[id$=fl_Approval]').val().trim();

    if (repName == ""){ $('#errmsg').text("Add error: [ Not allow to add empty name ]"); $('#errmsg').fadeIn(); return; } //check empty value
    if (checkArrayDup(repName,cLb) == true){ $('#errmsg').text("Add error: [ Name: "+ repName + " exist in the list ]"); $('#errmsg').fadeIn(); return; } //check duplicate

    updName = updName + sDelimiter;
    repName = repName + sDelimiter;
    var newVal= $('input[id$="hidText1"]').val().replace(updName ,repName);
    $('input[id$="hidText1"]').val(newVal);
    $('.container').remove();
    DrawData();
});

正常に動作しますが、問題はコードが効率的ではないことです。これを修正する方法がわかりません。for ループは更新ボタンで複数のクリック ハンドラーを作成していたので、ボタンをクリックするたびに、それが言うように、5つのデータがあり、最初のデータは5回のクリックイベントを発生させ、2番目のデータは4回のクリックイベントを発生させます。これらは最後のデータまで続き、重複データのチェックが正しく機能しません、これを修正する方法について何か考えはありますか? 下手な英語で申し訳ありません。

4

1 に答える 1

1

イベント委任を使用するとうまくいきますか? .upd div に直接イベント ハンドラーを割り当てる代わりに、次のようなことができます。

$('#dtdr').on('click', '.upd', function(e) { console.log(this); # --> .upd div });

これにより、クリック イベントが #dtdr div に委任されます。これは既に存在しているはずです。誰かが div をクリックすると、クリックが .upd div から発生したかどうかがチェックされ、関数が実行されます。これにより、行が追加されたときに新しいイベント ハンドラーを割り当てる必要がなくなります。

于 2012-12-04T02:13:45.300 に答える