0

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

2 回答 2

2

使用on()：

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

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

更改这一行：（顺便说一句，如果你真的想打印变量，这行是无效的 JS 语法idx）

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

到：

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

现在您可以这样做，而不是使用复杂的选择器：

$('body').on('mouseover', '.specialHoverDiv', function() {
于 2013-04-16T05:15:54.020 回答
1

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

 $(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(
  {
    .....
于 2013-04-16T05:15:41.940 回答