0

我有一个多行的表。单击每一行会将用户重定向到一个唯一的 url。我的问题是如何在表格行上应用点击事件，但带有动作类的 td 不应该受到可点击行的影响？我尝试了 :not jQuery 选择器，但不幸的是我对 jQuery 很陌生。谢谢！

这是我的桌子：

<table id="tblHotel">
<thead>
    <tr>
        <th class="sorting_disabled">&nbsp;</th>
        <th>ID</th>
    </tr>
</thead>
<tbody>
    <tr id="1" >
        <td class="actions">
            <a href="hotel/update/1"><i class="icon-pencil"></i> Edit</a>
            <a href="#"><i class="icon-trash"></i> Delete</a>
        </td>
        <td>1</td>
    </tr>
</tbody>

这是jQuery ajax：

$("#tblHotel tbody tr").click(function(){

var hotelid = $(this).attr('id');
$.ajax({
    type: "POST",                   
    url: "<?=site_url('hotel/view')?>/" + hotelid,
    success: function(data){
        $('.hiddenSidebar').html(data).show('slide', { direction: 'right' }, 300);
    },
    error: function(){
        alert('error!');
    }                       
});
}).not('tr td.actions');
4

3 回答 3

2

尝试

//use td instead of tr and filter out td.actions
$("#tblHotel tbody td:not(.actions)").click(function(){

    var hotelid = $(this).closest('tr').attr('id');
    $.ajax({
        type: "POST",                   
        url: "<?=site_url('hotel/view')?>/" + hotelid,
        success: function(data){
            $('.hiddenSidebar').html(data).show('slide', { direction: 'right' }, 300);
        },
        error: function(){
            alert('error!');
        }                       
    });
})

或停止事件传播td.actions

$("#tblHotel tbody td.actions").click(function(e){
    e.stopPropagation()
})
于 2013-08-22T12:40:18.913 回答
0 
$("#tblHotel tbody tr").not('td.actions').click(function () {
    var hotelid = $(this).attr('id');
    $.ajax({
        type: "POST",
        url: "<?=site_url('hotel/view')?>/" + hotelid,
        success: function (data) {
            $('.hiddenSidebar').html(data).show('slide', {
                direction: 'right'
            }, 300);
        },
        error: function () {
            alert('error!');
        }
    });
});

jsFiddle

而且，如果您使用的是 jQuery-UI，您的图标类应该如下所示：

<table id="tblHotel">
    <thead>
        <tr>
            <th class="sorting_disabled">&nbsp;</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td class="actions"> <a href="hotel/update/1"><i class="ui-icon ui-icon-pencil" title="Edit"></i></a>
 <a href="#"><i class="ui-icon ui-icon-trash" title="Delete"></i></a>
            </td>
            <td>1</td>
        </tr>
    </tbody>
于 2013-08-22T12:47:29.653 回答
0

你可以检查点击了什么，试试这个：

$("#tblHotel tbody tr").click(function(e){
    if($(e.target).is('.actions')) return false;
    var hotelid = $(this).attr('id');
    $.ajax({
        type: "POST",                   
        url: "<?=site_url('hotel/view')?>/" + hotelid,
        success: function(data){
            $('.hiddenSidebar').html(data).show('slide', { direction: 'right' }, 300);
        },
        error: function(){
            alert('error!');
        }                       
    });
});
于 2013-08-22T12:41:57.050 回答