如何在模态引导程序中单击行表？答案

【问题标题】：How do click row table in modal bootstrap?如何在模态引导程序中单击行表？
【发布时间】：2015-07-24 23:38:54
【问题描述】：

我在表格中绑定了数据并在模态引导程序中显示它们。我想使用单击或双击获取行表的数据，但它不起作用

   <div class="modal-body">
                <table id="table_search" class="table table-hover">
                    <thead>
                        <tr>
                            <td>CCA</td>
                            <td>Name</td>
                        </tr>
                    </thead>
                    <tbody>  
                    </tbody>
                </table>
            </div>

我使用jquery如下

 $('#table_search > tbody > tr').click(function () {
            alert( $(this).val());
        });

        $('#table_search > tbody > tr').dblclick(function () {
            alert($(this).val());
        });

但它不起作用。

【问题讨论】：

你是在modal触发之前还是之后绑定click事件？
好的，三个答案很好。谢谢各位。

标签： javascript jquery twitter-bootstrap modal-dialog html-table

【解决方案1】：

我认为您应该在这里使用事件委托或附加事件当模态显示时。 tr 也没有你想要的文本值

$(document).on('click dblclick', '#table_search > tbody > tr', function (e) {
   alert($(this).text());
});

【讨论】：

【解决方案2】：

问题是“点击”在元素存在之前就绑定了它。在将行添加到 DOM 后，您必须重新绑定，或者将父结构绑定到任何带有“on”的子选择器：

 $('#table_search > tbody').on('click', '>tr', function () {
        alert( $(this));
    });

    $('#table_search > tbody').on('dblclick', '>tr', function () {
        alert($(this));
    });

【讨论】：

【解决方案3】：

这是一个工作小提琴。其他人把我打到了解决方案的核心。我基本上把他们的答案组合在一起了。

https://jsfiddle.net/stephen_hartzell/seapkzvv/

HTML

<div class="modal-body">
            <table id="table_search" class="table table-hover">
                <thead>
                    <tr>
                        <td>CCA</td>
                        <td>Name</td>
                    </tr>
                </thead>
                <tbody>  
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                    </tr>
                </tbody>
            </table>
        </div>

Javascript

$('#table_search > tbody').on('click', '>tr', function () {
     alert( $(this).text());
});


$('#table_search > tbody > tr').dblclick(function () {
    alert($(this).text());
});

【讨论】：