1

我正在动态创建一个 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{})');

但似乎无法正确使用语法。有人可以帮忙吗？提前致谢。

4

5 回答 5

3

你可以试试这个

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

还要删除.from dim.src，而不是使用dim_srcas id，它在 jQuery 中用作class选择器，不知道你为什么使用它但它$('#'+dim.src)是无效的。

演示。

于 2012-09-28T22:39:42.617 回答
2

您可以使用委托事件方法并绑定悬停事件（即mouseenter和mouseleave）用于动态创建的具有类"dimsdiv"的元素和 ID为"fpdiv"的父元素：

$("#fpdiv").on({
    mouseenter : function() {
        // hover on
    },
    mouseleave : function() {
        // hover off
    }
}, ".dimsdiv");
于 2012-09-28T22:34:46.067 回答
0 
.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();

        });
});​
于 2012-09-28T22:34:11.167 回答
0

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

$('#'+dim.src).hover(
  function () {
    // hover in code here
  },
  function () {
   // hover out code here
  }
);
于 2012-09-28T22:36:19.527 回答
0

您需要的是一个实时功能，因此您可以设置一次，它将影响您的动态 html。

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

于 2012-09-28T22:37:11.883 回答