Question

我正在动态创建div，然后将其附加到容器中：

var str = '<div class="dimsdiv" id="'+dim.src+'" cursor:pointer;"></div>'; 
$('#fpdiv').append(str);

现在我需要添加一个悬停甚至是那些div。我试图引用它，但后来发现我需要考虑.on（）。我试过这个（之前）：

$('#'+dim.src).hover(function{},function{});

但正如所料，这不起作用。我也试过这个：

$('#'+dim.src).on('hover','(function{},function{})');

但似乎无法使语法恰到好处。有人可以帮忙吗？提前谢谢。

Answer 1

你可以试试这个

var str = $('<div/>', {
    text:'Hello',
    class:'dimsdiv',
    id:'dim_src',
    style:'cursor:pointer',
    mouseenter:function(){ ... },
    mouseleave:function(){ ... }
});
$('#fpdiv').append(str);

同时从.中移除dim.src，而不是dim_src作为id，它在jQuery中用作class选择器，不确定为什么使用它但是$('#'+dim.src)无效。

DEMO

Answer 2

您可以使用delegated-events approach并将悬停事件（即mouseenter和mouseleave）绑定到动态创建的元素，其中包含类“dimsdiv”和包含ID的父元素 “fpdiv”：

$("#fpdiv").on({
    mouseenter : function() {
        // hover on
    },
    mouseleave : function() {
        // hover off
    }
}, ".dimsdiv");

Answer 3

.on('hover','  has been deprecated in the latest jQuery version..

您需要使用委托事件来执行此操作。将事件添加到父容器。

第二种方法是在创建元素后添加事件

$(function() {
    var addEvent = function() {
        $('.dimsdiv').unbind().hover(function {}, function {});
    }

        // Lets say you are creating your div's here
        $('#btn').on('click', function() {
           // Create Div
             var str = '<div class="dimsdiv" id="'+dim.src+'" cursor:pointer;"></div>'; 
             $('#fpdiv').append(str);

            // Call the function here
            addEvent();

        });
});

Answer 4

1.8中删除了hover的简写on别名。您可以改用hover()方法。它接受一个或两个函数作为参数来处理悬停和悬停事件。

$('#'+dim.src).hover(
  function () {
    // hover in code here
  },
  function () {
   // hover out code here
  }
);

Answer 5

你需要的是一个实时功能，所以你可以设置一次，它会影响你的动态HTML。

http://api.jquery.com/live/

Jquery - 如何在动态创建后添加事件

5 个答案: