1

リストを動的に反復処理し、各 'li' 要素を dblclick イベントにバインドしようとしています。

私が欲しいのは、次のようなことができるようになることです：

var sorttList = document.getElementById("list1");
for (var k = 0; k < sorttList.childNodes.length; ++k) {
    sorttList.childNodes[k].bind('dblclick', function() {
        //some event
    });
}

そうしようとすると、「Uncaught TypeError: Object #HTMLLIElement has no method 'bind'」というエラーが表示されます。

このタスクに適した構文は何ですか?

4

5 に答える 5

3

bind()バニラ JavaScript の一部ではありません。あなたの意図は、おそらくjQuery ライブラリbind()の一部である関数を使用することです。

jQuery を使用していない場合は、それを入手してから、jQuery セレクターを使用し、jQuery オブジェクトを渡すようにコードを更新する必要があります。

bind()ページにすでに jQuery を組み込んでいる場合は、jQuery オブジェクトを呼び出していることを確認する必要があります。変化する：

sorttList.childNodes[k].bind('dblclick', function() {

に

$(sorttList.childNodes[k]).bind('dblclick', function() {

これは完全な解決策ではありませんが、うまくいけば、 jQuery を使用すると、標準の HTML 要素 JavaScript オブジェクトではなくjQuery Object$()が返される方法を示すことができます。メソッドは jQuery オブジェクトに存在しますが、使用しているような標準の DOM オブジェクトには存在しません。bind()

于 2012-07-16T18:04:58.917 に答える
1

jQuery を使用する場合:

$("#list1").children().on('dblclick', function() {
    //some event
    //var k = $(this).index(); will get the elements index
});

または、反復する必要がある場合:

$.each($("#list1").children(), function(k, elm) {
    $(elm).on('dblclick', function() {
        //some event, k still refers to the index
    });
});

または単純に：

var sorttList = document.getElementById("list1");
for (var k = 0; k < sorttList.childNodes.length; ++k) {
    sorttList.childNodes[k].ondblclick = function() {
        //some event
    };
}
于 2012-07-16T18:15:24.440 に答える
1 
var sorttList = document.getElementById("list1");

これはjQueryではなくDOMオブジェクトであり、jQueryオブジェクトではなくhtmlノードセットに反対する子ノードを取得しています。

jQuery("#list1 li").on("dblclick", function(){});
于 2012-07-16T18:04:29.270 に答える
0

正しい方法は、おそらく親にイベントを追加することです。あなたはすべての子供たちに同じイベントを追加しています、それはどのように良いですか？jQueryの使用：

$( '#list1' ).on( 'dblclick', function() {
});

// If you want to reduce to "li" elements only:
$( '#list1' ).on( 'dblclick', 'li', function() {
});

プレーンなJavaScriptを使用しているだけなら、ブラウザの互換性は気にしないと思います。その場合の方法は次のとおりです。

document.getElementById( 'list1' ).addEventListener( 'dblclick',
    function( e ) {
    if ( e.target.tagName === 'LI' ) {
        // you clicked a LI element
    }
});

参考までに、bindイベントをバインドするjQueryの（古い）関数です。jQueryオブジェクトで利用できます。DOM要素ではありません（何getElementByIdが返されるか）。これは、のES5（javascript標準）以降に使用できる別の関数でもありますFunction.prototype。エラーが示すように、DOM要素ではなく、関数で呼び出すことができます:-)。

于 2012-07-16T18:21:03.287 に答える
0

もう 1 つのオプションは、関数を DOM イベント ハンドラーに直接割り当てることです。

sortList.childNodes[k].ondblclick = function(){ ... };

既存のリスナーを上書きしないようにするには:

var curr = sortlist.childNodes[k].ondblclick;
var olddblclick = curr.ondblclick;
curr.ondblclick = function(e){
                     if(olddblclick) olddblclick.call(curr,e);
                     // code for new evt listener here
                  };
于 2012-07-16T18:03:25.590 に答える