jQ第一次点击事件没值，第二次有值？

Question

下面alert第一次没值，第二次有值，有大佬知道大概问题出在什么地方吗

$(document).on('click', '.dialog_edit', function () {
        $('tbody tr td').click(function () {
            tdIndex = $(this).index()
        });
        $('tbody tr').click(function () {
            trIndex = $(this).index()
        });
        alert(tdIndex,trIndex)//第一次没值，第二次有值，
    });

Answer 1

第一次点击dialog_edit，为td、tr绑定点击事件，触发alert，这是undefined

第二次点击dialog_edit，再次为td、tr绑定事件，这里重复绑定了，触发alert，这里有值，是因为td、tr、dialog_edit的点击事件为冒泡触发，所以先运行td->tr，为index赋值，再触发document的点击事件

代码逻辑惨不忍睹，jq是命令式的，没那么多花里胡哨，你可以直接像下面这样写。

$(document).on('click', '.dialog_edit', function () {
    //t tdIndex = $('tbody tr td').index();
    //t trIndex = $('tbody tr').index();
    
    //猜测你可能是想获得对应 dialog_edit 父级的td 和 tr
    //所以你应该
    let $this = $(this)
    let tdIndex = $this.closest('td').index();
    let trIndex = $this.closest('tr').index();
    
    alert(tdIndex,trIndex)//第一次没值，第二次有值，
});

Answer 2

按你的设定，只有当 .dialog_edit 被点击时，即你说的“第一次”，'tbody tr td' 和 'tbody tr'的click事件才被绑定，并且这个执行绑定的过程，click中代码不会被执行。 当第二次点击 “tbody tr td”时， 它和“tbody tr”的click事件才被触发， tdIndex和trIndex被赋值，然后alert执行后有值。

Answer 3

第一次点击给td和tr加点击事件，此时 trIndex = $(this).index() 未执行，alert没值

Answer 4

第一次点击时，执行了外层点击事件

tdIndex

所在代码块语句并没有执行，换而言之它没有被赋值
alert 执行自然为默认的undefined
第二次点击时
tr，td上绑定的事件点击事件才执行，tdIndex被赋值
后续alert弹出自然有值