동적으로 생성 된 요소에 마우스 오버 연결

Question

동적으로 생성 된 메뉴에 mouseover 이벤트를 추가하려고하지만 마우스 오버, 라이브, 마우스 온, 마우스 오프 등을 시도해도 작동하지 않습니다. 어떻게 할 수 있습니까? 할당 된 클래스가있는 요소를 만들더라도 마우스 오버를 선택합니까?

$(document).ready(function() { 

    var mapShown = {"1":"é","2":"è","3":"ë","4":"ê"}; 
    var selected_input = $('input').first(); 

    $(".char-selector").mouseover(function(e) { 
    $(".char-selector").removeClass("selected"); 
    $(e.target).addClass("selected"); 
    }); 

    $(document).click(function(e) { 
    if ($("#chartip").is(":visible")) { 
     if ($(e.target).parent().hasClass('char-selector')) { 
     selected_input.val(function(index, val) { 
      return val.substr(0, val.length - 1) + $(e.target).parent().find(".let").text(); 
     }); 
     } else if ($(e.target).hasClass('char-selector')) { 
     selected_input.val(function(index, val) { 
      return val.substr(0, val.length - 1) + $(e.target).find(".let").text(); 
     }); 
     } 
    $("#chartip").hide(); 
    $(".char-tooltip").empty(); 
    } 
    }); 

    for (var key in mapShown) { 
    var char_selector = $("<span/>").addClass("char-selector") 
    char_selector.append($("<span/>").addClass("let").text(mapShown[key])).append($("<br>")); 
    char_selector.append($("<span/>").addClass("num").text(key)); 
    $(".char-tooltip").append(char_selector); 
    } 
    $('.char-selector').first().addClass("selected"); 
    $("#chartip").show(); 

}); 

는 다음 작업 JSFiddle입니다 : 난 내 프로젝트 작업을하는 동안 https://jsfiddle.net/spkuyyho/7/

Answer 1

당신이 핸들러를 추가 할 때이 때문에 시간에 발생합니다.
핸들러를 추가 할 요소가 없습니다.
$(".char-selector").mouseover(function(e) {을 for 루프 아래로 이동하거나 이벤트 위임을 사용해야합니다. 여기

는 작업 바이올린입니다 : https://jsfiddle.net/zqoxy02c/

Answer 2

나는이 문제를 가지고 있었다. 요소를 동적으로 추가하는 함수 안에 마우스 오버 이벤트을 추가하는 함수를 넣어야합니다.

Answer 3

당신은 다음과 같이 향후에 추가 요소에 바인딩 할 수 있습니다 :

$(document).on('mouseover', ".char-selector", function(e) { 
    $(".char-selector").removeClass("selected"); 
    $(e.target).addClass("selected"); 
});