参考动态创建的元素

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");
 })

并且对于悬停，由于无法使用on（）和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');
    }
);

但是，我建议你给这些div一个公共的类名，并将其用作第二个选择器。

改变这一行:(顺便说一句，如果你真的想要打印变量idx，这行无效的JS语法）

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

至：

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

现在你可以这样做而不是一个复杂的选择器：

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