This is my first SO question and I'm afraid it may be a dumb one but I've spent many hours trying to figure this out and I have failed.
I am using DataTables plugin and trying to create a table with collapsible rows. The rows will have "select" buttons, each with their own .on("click") functions. When a child row is clicked, both its click function and its parent row's function execute. I am pretty sure this is because the event is bubbling up the DOM elements (child row(s) to parent row), and I am trying to use event.stopPropogation() inside the click function, but no matter what I try, I get the error message: "event.stopPropogation() is not a function"
Here is my basic table setup:
function _table(targetDiv) {
var keyTable = d3.select("#juice").append("table")
.attr("id", "keyTable");
var keyHead = keyTable.append("thead");
var columnNames = [null, "CPC", "Description"];
keyHead.append("tr")
.selectAll('td')
.data(columnNames).enter()
.append('th')
.html(function(d) { console.log(d); return d; });
$(document).ready(function() {
table = $('#keyTable').DataTable({
"ajax": "testing.txt",
"columns":[
{
//some stuff
}
]
});
And in my event listener (I believe that's what this is called), I have tried it several ways but none of these work:
$('#keyTable tbody')
.on("click", 'tr', function(event){
//add children and whatnot
event.stopPropogation();
}
Always I get the same error: Uncaught TypeError: event.stopPropogation is not a function
Let me know if I need to include more info or any of the code that I left out.
Aucun commentaire:
Enregistrer un commentaire