Mouseenter не работает для динамического содержимого

Question

Я написал код, где мне нужно вызвать функцию, когда мышь перешла к определенным элементам.

Сво работает отлично для ниже кода для всех статических

$("table td").on("mouseenter",function(){ 
    console.log("mouse entered") 
}); 

, но и для всего динамического <td class="editcolumn">XYZ</td> события не вызывает, даже если я использую ниже код

$("table td").on("mouseenter",".editcolumn",function(){ 
    console.log("mouse entered") 
}); 

Любая идея, как заставить его работать. Я использую JQuery 1.11

Answer 1

Я знаю, я просто заметил, но я фигурный я бы показал вам пример:

HTML:

<table id="tablee" cellspacing="0"> 
    <thead> 
     <tr class="tablehead"> 
      <th>This</th> 
      <th>is</th> 
      <th>a</th> 
      <th>table</th> 
      <th>header</th> 
      <th>and</th> 
      <th>stuff</th> 
      <th>though</th> 
     </tr> 
    </thead> 
    <tr class="append"> 
     <td class="edit-column">asdf</td> 
     <td class="edit-column">qwer</td> 
     <td class="edit-column">zxcv</td> 
     <td class="edit-column">rtyu</td> 
     <td class="edit-column">tyui</td> 
     <td class="edit-column">dfgh</td> 
     <td class="edit-column">dfgh</td> 
     <td class="edit-column">wert</td> 
    </tr> 
    <!-- ... --> 
</table> 
<br/> 
<br/> 
<input type="button" class="add-column" value="Add Column" /> 

Javascript:

$(function() { 
    $('.add-column').click(function() { 
     $('.append').append("<td class='edit-column'>iueo</td>"); 
     $('.tablehead').append("<th>Mo columns</th>"); 
    }); 
            /* vvv - this */ 
    $("#tablee").on('mouseenter', '.edit-column', function() { 
    /* ^^^ should be children or a child of this */ 
     $(this).css('background-color', 'yellow'); 
    }); 
}); 

Вот fiddle

This question's answer дает гораздо лучшее объяснение делегированных событий.

Answer 2

Если таблица Ивеко при загрузке DOM вы можете написать delgated событие для тд с классом editColumn как это:

$("table").on("mouseenter",".editcolumn",function(){ 
    console.log("mouse entered") 
}); 

Answer 3

Я тоже сталкивался с аналогичной проблемой для динамических элементов, которые добавлены или удалены. В таких ситуациях вы можете создавать динамические элементы с обработчиками событий, привязанными к их атрибутам , т. Е. В вашем случае вы можете поместить нужные операции в функцию, которая вызывается обработчиками событий атрибутов:

Это должно быть что-то вроде этого :

Javascript:

function whenMouseEnters() { 
    // perform some operations 
} 

Html:

<td onmouseenter="whenMouseEnters()">