bootstrap-table cardview click event bug
The click event listener won't work when the table is in .card-view mode. This jsFiddle reproduce the bug.
by jimkennelly
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.css">
<p>
Simple explain:<br>
1. Click the "Click Event"<br>
2. Observe the text below. Is the field variable correct?<br>
3. Click cardview toggle<br>
4. Again, click the "Click Event"<br>
5. The field variable is wrong.<br>
</p>
↓ The button here is .card-view toggle
<table id="demo">
</table>
<p>
<b>The text below will show field.</b>
</p>
<p id="fake_console">
No output
</p>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
color: white;
}
a {
color: #7FDBFF;
}
#fake_console {
color: #DDDDDD;
}
JavaScript
$('#demo').bootstrapTable({
showToggle: true,
columns: [{
field: "id",
title: "ID"
}, {
field: "name",
title: "Name"
}, {
field: "action",
title: "Action",
formatter: function () {
return '<a href="#">Click Event</a>'
}
}],
data: [
{id: 1, name: "a"},
{id: 2, name: "Second"},
{id: 30, name: "Thirty"}
]
});
$('#demo').on('click-cell.bs.table', function (e, field, value, row, $element) {
alert("row.id = " + row.id + " row.name=" + row.name)
$("#fake_console").text("field = "+field);
})
$("#demo").on("click", "a", function(e) {
//Prevent Jump to top
e.preventDefault();
})