jQ第一次点击事件没值,第二次有值?

CaixK
  • 491

下面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)//第一次没值,第二次有值,
    });
回复
阅读 1k
4 个回答
✓ 已被采纳

第一次点击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)//第一次没值,第二次有值,
});

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

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

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

tdIndex

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

宣传栏