使用事件通过 jQuery 修改元素

发布于 2024-12-09 09:43:30 字数 896 浏览 0 评论 0原文

我设置了一个表格，每行都有一个复选框作为该行中的第一项（想想 Gmail 的收件箱）。该行的绑定了一个悬停和单击事件处理程序。

我想要发生的是，当用户单击复选框时，该复选框将被选中，仅此而已。当用户单击行中的任何其他位置时，它应该执行其他操作。我试图通过查看正在传递的事件的 event.target 并查看它是否是复选框来实现此目的。但是，在我当前的实现中，当用户单击复选框时，不会发生任何事情，并且当他们单击行中的其他任何位置时，它的行为将按照我的预期进行。

我对复选框做错了什么？

这是我的代码：

$('.navTable > tbody > tr').hover(function() {

if (!$(this).children('td').hasClass('spacer') && !$(this).children('th').length > 0)
    $(this).css({background : "#EFEFEF", border : "1px solid #CCC"});
},function() {
    $(this).css({background : "", border : ""});
}).click(function(e) {
    console.log(e);
    if(e.target.attributes[0].nodeValue == "checkbox") {
        // Check the checkbox
        $("#"+e.target.id).attr('checked', 'checked');
    } else {
        // Do something else
    }
    return false;
});

感谢您提供的任何帮助。

原文

I have a table set up such that each row has a checkbox as the first item in the row (think Gmail's inbox). The <tr> of that row has a hover and click event handler bound to it.

What I want to happen is, when the user clicks on the checkbox, the checkbox becomes checked and that's all. When the user clicks anywhere else in the row, it should do something else. I am trying to achieve this by looking at the event.target of the event being passed and seeing if that's a checkbox or not. However, with my current implementation, when the user clicks on the checkbox, nothing happens and when they click anywhere else in the row, it behaves how I expect.

What am I doing wrong with regards to the checkbox?

Here is my code:

$('.navTable > tbody > tr').hover(function() {

if (!$(this).children('td').hasClass('spacer') && !$(this).children('th').length > 0)
    $(this).css({background : "#EFEFEF", border : "1px solid #CCC"});
},function() {
    $(this).css({background : "", border : ""});
}).click(function(e) {
    console.log(e);
    if(e.target.attributes[0].nodeValue == "checkbox") {
        // Check the checkbox
        $("#"+e.target.id).attr('checked', 'checked');
    } else {
        // Do something else
    }
    return false;
});

Thank you for any help you might provide.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一个人的旅程 2024-12-16 09:43:30

为什么不为复选框和行中的其他位置创建单独的单击处理程序：

$('.navTable > tbody > tr input').click(function(e) {
    // do whatever you want here
    e.stopPropagation();
    alert("click checkbox");
})

$('.navTable tr').click(function(e) {
    // click in a row, that's not in the checkbox
    alert("click row");
})

此处示例： http://jsfiddle .net/jfriend00/KEu3a/。

Why don't you make separate click handlers for the checkbox and elsewhere in the row:

$('.navTable > tbody > tr input').click(function(e) {
    // do whatever you want here
    e.stopPropagation();
    alert("click checkbox");
})

$('.navTable tr').click(function(e) {
    // click in a row, that's not in the checkbox
    alert("click row");
})

Example here: http://jsfiddle.net/jfriend00/KEu3a/.

回复收藏 0 原文

作妖 2024-12-16 09:43:30

尝试

$('.navTable tr').hover(function() { 
    if (!$(this).children('td').hasClass('spacer') && !$(this).children('th').length > 0) 
    $(this).css({background : "#EFEFEF", border : "1px solid #CCC"}); 
    },function() { 
            $(this).css({background : "", border : ""}); 
    }).closest('table')
        .delegate(':checkbox', 'change',function() { 
            var $checkbox = $(this),
            $td = $checkbox.closest('td'),
            $tr = $td.closest('tr');

        //If its not checked do something else.
        if($checkbox.not(':checked')) { 
      // Do something else 
    } 
    return false; 
});

try

$('.navTable tr').hover(function() { 
    if (!$(this).children('td').hasClass('spacer') && !$(this).children('th').length > 0) 
    $(this).css({background : "#EFEFEF", border : "1px solid #CCC"}); 
    },function() { 
            $(this).css({background : "", border : ""}); 
    }).closest('table')
        .delegate(':checkbox', 'change',function() { 
            var $checkbox = $(this),
            $td = $checkbox.closest('td'),
            $tr = $td.closest('tr');

        //If its not checked do something else.
        if($checkbox.not(':checked')) { 
      // Do something else 
    } 
    return false; 
});

回复收藏 0 原文

~没有更多了~