使用事件使用jQuery修改元素

我設置了一個表格，每行都有一個複選框作爲行中的第一項（請考慮Gmail的收件箱）。該行的<tr>有一個懸停和單擊事件處理程序綁定到它。使用事件使用jQuery修改元素

我想要發生的是，當用戶點擊複選框時，複選框將被選中，這就是全部。當用戶點擊該行的其他地方時，它應該做其他事情。我試圖通過查看傳遞的事件的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; 
});

感謝您的幫助，您可以提供。

來源

2011-10-12 James W.

你爲什麼不做出個獨立點擊處理程序的複選框和其他地方的行中：

$('.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/。

來源

2011-10-12 19:20:21 jfriend00

嗯，這似乎是一個更好的解決方案。不過，我想知道爲什麼我的方法不起作用？編輯：其實，現在我已經嘗試過了，你的方法似乎也不工作。有什麼建議麼？ –

適合我在我的jsFiddle。我做了一些編輯，因此請確保您嘗試最新版本。如果它不適合你，那麼請在你的問題中發佈你試過的代碼和HTML。如果您獲得實施的權利，這在概念上起作用。你可以在jsFiddle中看到它。 – jfriend00

謝謝你，這很好。 –

嘗試

$('.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; 
});

來源

2011-10-12 19:26:30

使用事件使用jQuery修改元素

回答

相關問題