How To Dynamically Add "More" Option To Rows

MikeS

I came across this post http://datatables.net/forums/discussion/17590/adding-a-button-per-each-row-with-mouseover-event-adding-click-event-on-button/p1 while trying to put a "More..." button on the row that would reveal more detail about the row. As with the OP, I can't determine when the option is clicked!

Currently, I'm able to double click the row to toggle the details for the row, but, I'd prefer to have a visual clue like "More..." to trigger this action.

The issue got closed and I can't find any way to resolve it.

I'll update this post with a jsFiddle once I can produce the issue. Just thought that if the solution is a simple one, perhaps the jsFiddle isn't even required.

MikeS

jsFiddle http://jsfiddle.net/knVrQ/1/

Move mouse pointer over rows and try to click the button. No alert is given.

allan

You want to use `mouseenter` rather than `mouseover` : http://jsfiddle.net/knVrQ/2/

The problem with `mouseover` is that it fires every time you mouse over a child element of the target as well (cells, and the button in this case) which disrupts things badly. Its also a performance hit. `mouseenter` (and `mouseleave` ) are much nicer.

Allan

MikeS

Thanks for that explanation Allan, however, the jsfiddle that you've modified to use mouseenter still does not react to the click event of the "Add" button.

UPDATE: The alert sometimes appears but it seems random when it does. I don't have any sequence of events to give. All that I could determine is that if I keep clicking the button or the actual row and then try different rows, eventually sometimes the alert is shown.

allan

Seems to work 100% of the time fore.

I would say that your code is making the HTML invalid since it is adding a button to a `tr` element. Perhaps that effects some browsers...

Allan

MikeS

You are correct. It seems to only be a problem in Chrome (my default browser). IE and Opera just check out fine. Not sure of others.

Thanks again for your help.