Возвращение к динамически созданным элементам

Question

Я пытаюсь разобраться с проблемой, с которой я сталкиваюсь с JQuery. Когда я динамически создаю элементы в DOM, связанные события, похоже, не срабатывают (например: .hover). Не уверен, что при динамическом создании элементов мне нужно каким-то образом присоединить элементы? Заранее спасибо!

HTML код:

<div id="dosages" style="display:none;"> 
     <h4>Choose a dosage</h4> 
     <ul id="dosagesUL" class="thumbnails"> 
     </ul> 
    </div> 

Jquery/Javascript:

$("#medsSelect").change(function() { 

    var dosages = []; 
    var dosage; 
    var caption; 
    var image; 
    var html; 
    var idx; 

    $("#medsSelect option:selected").each(function() { 

     idx = $(this).attr("value"); 

     for (i = 0; i < medsArray[idx][1].length; i++) { 

      dosage = medsArray[idx][1][i]; 
      caption = medsArray[idx][2][i]; 
      image = medsArray[idx][3][i]; 

      html = "<li class=\"span2\">"; 
      html += "<div id=\"dosageIdx-\" + idx>"; 

      html += "<div class=\"thumbnail\">"; 
      html += "<img src=\"img/meds/" + image + ".png\">" 
      html += "</div>"; 

      html += "<div class=\"thumbnail-capbox\">"; 
      html += "<div class=\"med-label\">" + dosage + "</div>"; 
      html += "<div class=\"med-caption\">" + caption + "</div>"; 
      html += "</div>"; 

      html += "</div>"; 
      html += "</li>"; 

      dosages.push(html); 
     } 

    }); 

    $("#dosages").fadeOut(0); 
    $("#dosagesUL").empty(); 
    $("#dosagesUL").append(dosages.join('')); 
    $("#dosages").fadeIn(600); 

    }) 

    $('div[id*="dosageIdx-"]').hover(

     function() { 
      alert('in'); 
     }, 

     function() { 
      alert('out'); 
     } 
    ); 

Answer 1

вы должны использовать на делегированные события для динамически добавленного элемента ..

$(document).on('click','#elementID',function(){ 
     alert("clicked"); 
}) 

и зависании, так как на() и hover() не могут быть использованы, вы можете использовать mouseenter и оставить вместо этого

$(document).on(
{ 
    mouseenter: function() 
    { 
    alert("mouseenter"); 
    }, 
    mouseleave: function() 
    { 
    alert("mouseleave"); 
    } 
}, '#elementID'); 

всегда рекомендуется делегировать свое мероприятие в ближайший статический родительский элемент, чем document ... в вашем случае является #dosagesUL (я думаю) ... и да, используя класс, если у вас есть несколько ID всегда лучше ..

$('#dosagesUL').on(
    { 
    ..... 

Answer 2

Использование on():

$('body').on('mouseover', 'div[id*="dosageIdx-"]', function() { 
     alert('in'); 
    } 
); 
$('body').on('mouseout', 'div[id*="dosageIdx-"]', function() { 
     alert('out'); 
    } 
); 

Однако, я предлагаю вам дать эти дивы общее название класса, а также использовать его в качестве второй селектор.

Изменение этой линии: (кстати, эта строка является недействительным синтаксис JS, если вы на самом деле хотели напечатать переменную idx)

html += "<div id=\"dosageIdx-\" + idx>"; 

к:

html += "<div id=\"dosageIdx-" + idx + "\" class=\"specialHoverDiv\" \">"; 

и теперь вы можете сделать это вместо сложного селектора:

$('body').on('mouseover', '.specialHoverDiv', function() {