对象#<HTMLLIElement>没有方法'绑定'

Object #<HTMLLIElement> has no method 'bind'

本文关键字：有方法 绑定 HTMLLIElement lt 对象 gt      更新时间：2023-10-22

我正在尝试动态迭代列表，并将每个"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没有方法‘bind’"

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

bind()不是普通JavaScript的一部分。您的意图可能是使用作为jQuery库一部分的bind()函数。

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

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

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

至

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

这不是一个完美的解决方案，但希望这将展示$()在使用jQuery时如何返回jQuery对象，而不是标准的HTML元素JavaScript对象。bind()方法存在于jQuery对象上，但不是像您正在使用的那样的标准DOM对象。

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

这是DOM对象，而不是jQuery，并且您正在获取针对html节点集的子节点，而不是一个jQuery对象。

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

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

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

正确的方法可能是在父级上添加事件。你在所有的孩子身上添加了相同的事件，这有什么好处？使用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元素上调用，正如您的错误所示：-）。

相关文章：