引用动态创建的元素答案

【问题标题】：Referring to dynamically created elements引用动态创建的元素
【发布时间】：2013-04-16 05:07:09
【问题描述】：

我正在尝试解决我在使用 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');
        }
    );

【问题讨论】：

-Event binding on dynamically created elements
-In jQuery, how to attach events to dynamic html elements
-Adding jQuery click events to dynamically added content
感谢链接，为了清楚起见，所有动态创建的元素都需要您手动将事件处理程序附加到它们？（例如：.hover）？
@Telegard - 是的，或者您可以使用.on() 或.delegate() 委派这些事件。委托事件在执行脚本时附加到 DOM 中最近的静态父元素。

标签： jquery

【解决方案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() {

【讨论】：

+1 建议使用类。
示例也有轻微的 JS 语法问题需要 ... + idx + "\" class= ... ，感谢您的示例，就像一个魅力:)

【解决方案2】：

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

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

对于悬停，由于不能使用 on() 和 hover()，您可以使用 mouseenter 和 leave 代替

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

始终建议将您的事件委托给最接近的静态父元素而不是 document... 在您的情况下是 #dosagesUL（我认为）...如果您有多个 ID，则使用类是总是更好..

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

【讨论】：