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

使用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() {

Answer 2

你应该在委托事件中使用动态添加的元素..

 $(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(
  {
    .....

参考动态创建的元素

2 个答案: