Question

我正在尝试动态遍历列表并使用dblclick事件绑定每个'li'元素。

我想要的是能够做如下的事情：

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没有方法'bind'”

此任务的适当语法是什么？

Answer 1

bind()不是vanilla JavaScript的一部分。您的意图可能是使用属于jQuery library的<{1}}函数。

如果您不使用jQuery，则需要获取它，然后更新代码以使用jQuery选择器并传递jQuery对象。

如果您已经在页面中包含jQuery，那么您需要确保在jQuery对象上调用bind()。变化：

bind()

到

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

这不是一个完美的解决方案，但希望这将证明使用jQuery时$(sorttList.childNodes[k]).bind('dblclick', function() {将如何返回 jQuery Object ，而不是标准的HTML元素JavaScript对象。 $()方法存在于jQuery对象上，但不是您正在使用的标准DOM对象。

Answer 2

var sorttList = document.getElementById("list1");

那是DOM对象，而不是jQuery，你抓住的是反对html节点集的子节点，而不是jQuery对象。

jQuery("#list1 li").on("dblclick", function(){});

Answer 3

如果使用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
    };
}

Answer 4

您的另一个选择就是直接将函数分配给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
                  };

Answer 5

正确的方法可能是在父级上添加事件。你在所有的孩子身上添加了同样的活动，这有什么用？使用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返回的内容）。它也是自Function.prototype中的ES5（javascript标准）以来可用的另一项功能。您可以在函数上调用它，而不是在DOM元素上调用它，因为您的错误显示： - ）。

对象＃<htmllielement>没有方法'bind'</htmllielement>

5 个答案: