getting Cell data on('click' calls multiple times for same click

kvasko

I'm using Aurelia. The following code gets run when data of a particular variable gets changed. When a new set of data is found, I recreate the entire tables.

I'm wanting to get the cell value when the user clicks a particular cell, and if they do, call a different function. However I get

Unable to get "property 'cell' of undefined or null reference", I'm not sure if it has anything to do with it but I do notice that even though I'm destroying the DataTables (e.g. this.dt.destroy()) the table seems to be sticking around because I will see the td information printed out the same number of times the data has changed.

e.g. if I reload the data 3 times and click a cell I see

"this"
<td>E</td>
"this"
<td>E</td>
"this"
<td>E</td>

if (this.dt != null) {
this.dt.destroy();
this.dt.$('#example').empty()
}
this.dt = $('#example').DataTable({
data: this.dgData,
"columns": this.dgDataColumns
});
$('#example').on('click', 'td', function () {
console.log("this")
console.log(this)
alert(this.dt.cell(this).data());
});
this.dt.clear().rows.add(this.dgData.Table).draw();

kvasko

One of the two issues I figured out.

"property 'cell' of undefined or null reference"

It was a scope issue. Is there a cleaner way of doing this instead of making a var and copying data into it?

var dtest = this.dt
$('#example').on('click', 'td', function () {
console.log("this")
console.log(dtest.cell(this).data())
alert(dtest.cell(this).data())
});

Issue 2 I still have no idea how to fix. It is almost like this.dt.destroy() is not completely destroying the table.

For example if I call my function multiple times which destroys the table and recreates it, the number of times the function is called is how many times an alert will display.

If the function was called 4 times it would display.

"undefined"
"undefined"
"undefined"
"Last good value"

allan

Could you link to a page showing the issue please?

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

kvasko

I can't link it to the public.The other issue is I'm using Aurelia framework for the interactions so it would be hard to translate to using jsfiddle (at least I don't know how).

I took a video of the issue.

https://www.youtube.com/watch?v=Tqx6dBQ0Mj0&feature=youtu.be

On the initial load of the table it works. The data is there and when I select I get the cell value without an issue. If the dropdown box is selected again the cell value is loaded twice, one is "undefined" the next is the value. I want. If I load it again I get 2x undefined and then the value I want.

I'm not sure how else to explain it.

The process is.

1. Initial table load from dropdown box.
2. click cell in table (get correct value back)
3. Select different information from drop down box
4. Data loads from REST call and function is called saying the data changed in that variable.
5. Current Datatable destroyed
6. Datatable loaded with new data
7. click cell get "undefined" and then the cell I want

Expected the cell I want without the undefined.

allan

Sounds like you need to unbind your original event handler first before you then bind it again. Otherwise you have a memory leak and also multiple event handlers being assigned to elements.

Try:

$('#example').off( 'click.rowClick' ).on('click.rowClick', 'td', function () {

I've used a namespace, but you could do without that if you aren't using any other click events.

Allan

kvasko

Allan,

Thank you. That worked!

I actually tried

```$('#example tbody').on( 'click', 'td', function () {

right before you posted and that worked as well, however I think it would have the same issue with the memory leak issue.

I think my understanding of jQuery and javascript needs a lot of help. :) Thanks again.

rajanwalt

allan, Thanks a lot.

Due to delegate event i was getting multiple calls when click event triggered.

Now it's resolved by your code,
$('#example').off( 'click.rowClick' ).on('click.rowClick', 'td', function () {