jquery - a href link clickable in javascript based bootstrap table

Question

I am trying to get the first column called title to be able to be clicked and execute some code. For some reason the click event is not firing when clicked. I tried

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

My table is populated from 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']);
?>

Where in your html file is your javascript?

Toby Allen
– Toby Allen

2015-04-10 20:09:05 +00:00
Commented Apr 10, 2015 at 20:09 — Toby Allen
– Toby Allen, Commented Apr 10, 2015 at 20:09

Gary Storey · Accepted Answer · 2015-04-10 20:09:15Z

2

Since the HTML is being generated dynamically, you should event delegation on the parent element.

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

answered Apr 10, 2015 at 20:09

Gary Storey

1,7822 gold badges15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hackerman · Accepted Answer · 2015-04-10 20:08:41Z

1

Try with $(document).on..like this:

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

answered Apr 10, 2015 at 20:08

Hackerman

12.3k2 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

jquery - a href link clickable in javascript based bootstrap table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related