Question

An onmouseover over a cell generates a div inside that cell. That div has an onclick, but this onclick is not executed. Here’s some sample code: JSFiddle

JavaScript:

var oldCell='';
function addDiv(cell){
    if(oldCell != ''){
        oldCell.innerHTML = '';
    }
    cell.innerHTML = "<div class='innerDiv' onclick='console.log(this.parentNode);'></div>";
    oldCell = cell;
} 

HTML

<table border='1px solid black'>
    <tr>
        <td class='cell' onmouseover='addDiv(this)'></td>
        <td class='cell' onmouseover='addDiv(this)'></td>
    </tr>
     <tr>
        <td class='cell' onmouseover='addDiv(this)'></td>
        <td class='cell' onmouseover='addDiv(this)'></td>
    </tr>
</table>​

I’ve tried focusing on the div, but this does not wok either. I’ve also tried giving the cell the onclick, and then focusing on the cell instead of the div, but this doesn’t work in Chrome, does in Firefox though.

Answer 1

It appears that the mouseover event is creating a new object inside of it everytime the “mouseover” event is called. Clicking on the object fires a mouseover event, which is likely replacing the element and therefore making it impossible to call an onclick event.

My guess at the event list:
– Mouseover
– Mousedown -> Mouseover
– Object replaced.
– Mouseup (doesn’t count as click, because a new object is receiving only mouse up)

---

Edit:

If your goal is to just create a mousehover effect then you should use CSS’s hover keyword.

See this fiddle that does essentially what you are trying to do: http://jsfiddle.net/Tb2kK/27/

---

Edit: To do it similar to how you’re doing it, you need to check if a div already exists. One way would be to assign an id: http://jsfiddle.net/mZdpN/