Question

我有一个包含多行的表格。单击每一行会将用户重定向到唯一的URL。我的问题是如何在表行上应用click事件，但是带有action类的td不应该受可点击行的影响？我试过：不是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');

Answer 1

尝试

//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()
})

Answer 2

您可以查看点击的内容，试试这个：

$("#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!');
        }                       
    });
});

Answer 3

$("#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>

将jQuery函数应用于表行但不是第一个表数据

3 个答案: