mardi 28 juin 2016

event.stopPropogation is not a function


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