0

javascriptを介してフォーム要素のIDまたは名前を変更すると、それに関連付けられていたjqueryイベントが存在しなくなったことに気づきました。Firefox17とIE10でこれを試しました。これは仕様によるものですか？もしそうなら、それを防ぐ方法はありますか？

更新：例については、 http： //jsfiddle.net/qHH7P/2/を確認してください。

jqueryを介して行を削除するボタンを追加しています。最初の行を削除するときは、2番目の行の要素に新しい名前とIDを付けます。その後、残りの行の削除ボタンはイベントを発生させなくなります。ASP.NET MVCは、バインド時にオブジェクトのコレクションに特定の命名規則を想定しているため、要素の名前を変更する必要があります。そのため、名前を「1」ではなく「0」に変更する必要があります。名前を変更しています

var regexpattern = new RegExp("WorkspaceQuestionSets\\[.+\\]", "g");
$(this).html($(this).html().replace(regexpattern, "WorkspaceQuestionSets[" + index + "]"));
var regexpattern = new RegExp("WorkspaceQuestionSets_.+__", "g");
$(this).html($(this).html().replace(regexpattern, "WorkspaceQuestionSets_" + index + "__"));

ボタンの名前を変更していないことに気づきました。したがって、イベントがなくなったことはさらに意味がありません。しかし、要素の名前を変更するためにコードをコメントアウトすると、イベントは残ります。

4

2 に答える 2

1

HTMLを書き直しています。文字列.html()を返します。この文字列を変更して再度設定します。ブラウザはそのHTML文字列を解析し、そこから新しいDOM要素を作成します。このプロセスでは、DOM要素を破棄し、その結果、以前にバインドしたイベントハンドラーを失います。

ボタンの名前を変更していないことに気づきました。したがって、イベントがなくなったことはさらに意味がありません。

HTML表現を変更したかどうかに関係なく、内部にあるすべての要素this（私が想定する各行）を破棄して再作成しています。

これを解決するには、可能性があります。

  1. イベント委任を使用する：イベントハンドラーを要素に直接バインドする代わりに、それらを常に存在する祖先にバインドします。イベントの委任の詳細については、.on* [ドキュメント]のドキュメントのセクション「直接および委任されたイベント」を参照してください。

  2. HTMLを書き直さないでください。属性を変更する要素を選択してname変更します。例えば：

    var name_exp1 = /WorkspaceQuestionSets\[.+\]/g;
var name_exp2 = /WorkspaceQuestionSets_.+__/g;


sourceEle.closest(".table").find(".row.set").each(function(index) {
    // Edit the name attribute of all `select` and `input` elements
    $(this).find('select, input').prop('name', function(i, name) {
        if (name_exp1.test(name)) {
            return name.replace(
                name_exp1, 
                "WorkspaceQuestionSets[" + index + "]"
            );
        }
        else if (name_exp2.test(name)) {
            return name.replace(
                name_exp1, 
                "WorkspaceQuestionSets_" + index + "__"
            );
        }
        return name;
    });
});

JavaScriptでは、HTMLを忘れて、DOMを操作します。

于 2012-12-28T11:33:01.113 に答える
0

これは、Chrome24のプレーンJavaScriptでは発生しません。

JSコンソールに入力した内容は次のとおりです。

document.write("<button id='bb'/>")
//undefined
var bb=document.getElementById('bb')
//undefined
bb
//<button id=​"bb">​&lt;/button>​
bb.addEventListener('click',function(){alert('hi');});
//undefined
bb
//<button id=​"bb">​&lt;/button>​
bb.id
//"bb"
bb.id="qq"
//"qq"
bb
//<button id=​"qq">​&lt;/button>​
document.getElementById("bb")
//null
document.getElementById("qq")
//<button id=​"qq">​&lt;/button>​

そして重要なことに、ボタンをクリックすると、への割り当ての前後の両方でイベントがトリガーされましたbb.id。

また、Firefox 17では、プレーンJavaScriptでそれが発生することはあまりわかりませんでした。私は次のページにいました：http ：//start.ubuntu.com/12.04/Google/？sourceid = hp

そして、コンソールで私が発行したものは次のとおりです。

[19:29:41.261] var bb=document.getElementById('sbtn')
[19:29:41.267] undefined
[19:29:45.501] bb.addEventListener('click',function(){alert('hi')});
[19:29:45.507] undefined
[19:29:48.292] bb.id
[19:29:48.298] "sbtn"
[19:29:59.613] bb.id="sbttttttn"
[19:29:59.619] "sbttttttn"

が変更された後もアラートは発生しましたid。

これは、私が試すことができないIE、またはjQueryがイベントを設定する方法やIDの変更を処理する方法（おそらくオブジェクトを目に見えない形で破壊する方法）のいずれかに固有である必要があります。

于 2012-12-28T00:21:45.507 に答える