Question

我正在尝试获取名为title的第一列，以便能够单击并执行一些代码。由于某种原因，单击时不会触发click事件。我试过了

$('.song_edit').on("click",function() {
    alert("test");
});

我的表格是从javascript填充的

HTML

<div class="col-lg-9">
    <h1>Current Songs</h1>
    <table id="table-javascript"></table>
</div>

jquery的

$('#table-javascript').bootstrapTable({
    method: 'get',
    url: 'bootstrap_database.php',
    height: 600,
    cache: false,
    striped: true,
    pagination: true,
    search: true,
    pageSize: 20,
    pageList: [20, 40, 60, 100, 200],
    minimumCountColumns: 2,
    clickToSelect: true,
    columns: [{
        field: 'title',
        title: 'Title',
        align: 'center',
        sortable: true,
        width: '20'
    },{
        field: 'audio',
        title: 'Audio',
        align: 'center',
        width: '20'
    },{
        field: 'sheet1',
        title: 'Sheet 1',
        align: 'center',
        width: '20'
    },{
        field: 'sheet2',
        title: 'Sheet 2',
        align: 'center',
        width: '20'
    },{
        field: 'sheet3',
        title: 'Sheet 3',
        align: 'center',
        width: '20'
    },{
        field: 'lyrics',
        title: 'Lyrics',
        align: 'center',
        width: '20'
    },{
        field: 'sheet1notes',
        title: 'Notes 1',
        align: 'center',
        width: '20'
    },{
        field: 'sheet2notes',
        title: 'Notes 2',
        align: 'center',
        width: '20'
    },{
        field: 'sheet3notes',
        title: 'Notes 3',
        align: 'center',
        width: '20'
    }]
});

bootstrap_database.php

<? session_start(); ?>
<?
include('../includes/connect.php');
$sql = "SELECT * FROM wafilepaths";
$result = mysql_query($sql);
$i = 0;
while ($row = mysql_fetch_array($result)) {
    if (!empty($row['audio'])) {
        $audio = '<a href="'.$row['audio'].'" target="_blank"><i class="fa fa-music"></i></a>';
    } else {
        $audio = '';    
    }
    if (!empty($row['sheet1'])) {
        $sheet1 = '<a href="'.$row['sheet1'].'" style="color:red" target="_blank"><i class="fa fa-file-pdf-o"></i></a>';
    } else {
        $sheet1 = '';   
    }
    if (!empty($row['sheet2'])) {
        $sheet2 = '<a href="'.$row['sheet2'].'" style="color:red" target="_blank"><i class="fa fa-file-pdf-o"></i></a>';
    } else {
        $sheet2 = '';   
    }
    if (!empty($row['sheet3'])) {
        $sheet3 = '<a href="'.$row['sheet3'].'" style="color:red" target="_blank"><i class="fa fa-file-pdf-o"></i></a>';
    } else {
        $sheet3 = '';   
    }
    if (!empty($row['lyrics'])) {
        $lyrics = '<a href="'.$row['lyrics'].'" style="color:red" target="_blank"><i class="fa fa-file-pdf-o"></i></a>';
    } else {
        $lyrics = '';   
    }
    $response[$i]['title'] = '<a class="song_edit">'.$row['title'].'</a>';
    $response[$i]['audio'] = $audio;
    $response[$i]['sheet1'] = $sheet1;
    $response[$i]['sheet2'] = $sheet2;
    $response[$i]['sheet3'] = $sheet3;
    $response[$i]['lyrics'] = $lyrics;
    $response[$i]['sheet1notes'] = $row['sheet1notes'];
    $response[$i]['sheet2notes'] = $row['sheet2notes'];
    $response[$i]['sheet3notes'] = $row['sheet3notes'];
    $data['posts'][$i] = $response[$i];
    $i = $i+1;
}
echo json_encode($data['posts']);
?>

Answer 1

由于HTML是动态生成的，因此您应该在父元素上进行事件委托。

$('#table-javascript').on('click','.song_edit', function(){
  alert('hello');
});

Answer 2

尝试$(document).on ..像这样：

$(document).on("click",".song_edit",function(event) {
   event.preventDefault();
   alert("test");
});

jquery - 在基于javascript的引导程序表中可点击的href链接

2 个答案: