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 对象。

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

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

到

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

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

于 2012-07-16T18:04:58.917 回答
1 
var sorttList = document.getElementById("list1");

那是 DOM 对象，而不是 jQuery，并且您正在抓取与 html 节点集相对的子节点，而不是 jQuery 对象。

jQuery("#list1 li").on("dblclick", function(){});
于 2012-07-16T18:04:29.270 回答
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 回答
0

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