Question

我在我的反应应用程序中有一张表。我正在尝试实现这样的点击事件：

$('#detailedTable tbody').on('click', 'tr', function() {
    //var row = $(this).parent()
    if ($(this).next('tr').hasClass('row-details')) {
        $(this).next().toggle();
        return;
    }
})

我把它放在componentDidMount方法中。

这是我的表：

<table className="table table-hover table-condensed table-detailed"
id="detailedTable" ref={node => this.table_el = node}>
    <thead>
        <tr>
            <th className="sorting_disabled wd-5p"></th>
            <th >Title</th>
            <th className="wd-15p">Channel</th>
            <th className="wd-10p">File Type</th>
            <th className="wd-15p">Uploaded</th>
            <th className="wd-20p">Process</th>
            <th className="wd-10p">Status</th>
        </tr>
    </thead>
    { this.state.MediaFiles.map((item, i) => (
    <tbody>
        <tr onClick={this.rowClick} id={i}>
            <td className="v-align-middle">
                <div className="checkbox">
                <input type="checkbox" value="3" id={"checkbox1" + i}/>
                <label htmlFor={"

但点击事件没有被解雇。怎么了？

Answer 1

Click事件与以下HTML完美配合：

＆＃13;

$('#detailedTable tbody').on('click', 'tr', function() {
  console.log('click works!');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table className="table table-hover table-condensed table-detailed" id="detailedTable" ref={node => this.table_el = node}>
  <thead>
    <tr>
        <th className="sorting_disabled wd-5p">
        </th>
        <th>Title</th>
        <th className="wd-15p">Channel</th>
        <th className="wd-10p">File Type</th>
        <th className="wd-15p">Uploaded</th>
        <th className="wd-20p">Process</th>
        <th className="wd-10p">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr onClick={this.rowClick} id={i}>
        <td className="v-align-middle">
            TBODY ITEM (click it)
        </td>
    </tr> 
  </tbody>
</table>

＆＃13;

Answer 2

$(document).on('click', '#detailedTable tbody tr', function() {
  //var row = $(this).parent()
  if ($(this).next('tr').hasClass('row-details')) {
    $(this).next('tr').toggle();
    return;
  }
});

jQuery单击事件在表上不起作用

2 个答案: