关于jQuery选择器的问题

Question

$(function(){

        $('.div4table tr td.trigger').each(function(){
            this.click(function(){
                $('#toggle'+index).toggle();
            });
        });
    });
        

这一块代码难道有问题么，怎么绑定不上点击事件啊？求找bug。。
下面是相关的一块代码

<div class="div4table">
    <tr>
    <td>#agent_ip#</td>
    <td>#ip#/#type#</td>
    <td>#tcp_max#/#tcp_min#/#tcp_avg#</td>
    <td>#tcp_lost#/#tcp_send#</td>
    <td>#icmp_max#/#icmp_min#/#icmp_avg#</td>
    <td> #icmp_lost#/#icmp_send#</td>
    <td class="trigger">查看/收起</td>
    </tr>
    <tr id="toggle#i#"><td colspan="7"><div>这个地方要展示的是影藏起来了的其他的信息</div></td></tr>
</div>

补充一下问题我的表格是循环生成的，我会产生许多类名为trigger的TD，而我想每一个对应绑定下面动态生成ID的div。。。

Answer 1

 $('.div4table tr td.trigger').each(function(){
        this.click(function(){
            $('#toggle'+index).toggle();
        });
    });
});

1)index变量在哪里？
2)this是一个DOM对象，而不是jquery对象
DOM对象也有click方法，但是出入回调函数没有效果
3)上面的代码为没有个td.trigger绑定了一个回调，当多行多列td.trigger时，不是好的写法

修改如下:

//使用事件代理机制 利用事件冒泡，使用div.div4table代理发生在td.trigger上的click事件
$('.div4table').on("click","tr td.trigger",function(){
    //为你的td.trigger 添加一个自有属性，记录td的index值，这样不用再去计算
    var index=$(this).attr("td-index");
    $('#toggle'+index).toggle();
});

Answer 2

给题主补充一点知识，推荐一个jQuery源码查看器，http://www.css88.com/tool/jQuerySourceViewer/#v=1.7.2&fn=jQuery.each。

题目中的each方法是jQuery.fn.each，

function (callback, args) {
    return jQuery.each(this, callback, args);
}

调用的是jQuery.each

function (object, callback, args) {
    var name, i = 0,
        length = object.length,
        isObj = length === undefined || jQuery.isFunction(object);

    if (args) {
        if (isObj) {
            for (name in object) {
                if (callback.apply(object[name], args) === false) {
                    break;
                }
            }
        } else {
            for (; i < length;) {
                if (callback.apply(object[i++], args) === false) {
                    break;
                }
            }
        }

        // A special, fast, case for the most common use of each
    } else {
        if (isObj) {
            for (name in object) {
                if (callback.call(object[name], name, object[name]) === false) {
                    break;
                }
            }
        } else {
            for (; i < length;) {
                if (callback.call(object[i], i, object[i++]) === false) {
                    break;
                }
            }
        }
    }

    return object;
}

就针对题目那段代码来讲，只要关注这段代码即可，

for (; i < length;) {
    if (callback.call(object[i], i, object[i++]) === false) {
        break;
    }
}

其中callback是题目中的

function(){
        this.click(function(){
            $('#toggle'+index).toggle();
        });
    });
}

那其实可以看到这个callback函数的调用方式是

callback.call(object[i], i, object[i++])

不难看出在函数内部的this是指向object[i]的，这是一个DOM对象。
为什么是一个DOM对象，这样就要说说jQuery的伪数组的性质了。

Answer 3

你的index在哪，each里面没有定义啊；还有你本身好像就写错了吧，需求是一个点击查看和关闭的方法吧。你只有一个trigger啊，为什么要遍历，直接点击事件toggle就ok了，如果真的有多个点击事件，你的关系也没对应上，需求不明确

Answer 4

存在的bug，一楼都说清楚了。

学会看console啊，一有错日志都打在console上

Answer 5

表格是循环生成的。百度下on绑定事件。

Answer 6

自己把它顶上来一下，看今天有没解答。。。