Question

我有一个动态div，我希望在鼠标悬停时触发事件。我使用jQuery on来触发事件，选择器也是动态的，并从变量获取其内容，但它不起作用！当我将变量选择器更改为常规选择器时，它可以正常工作。

HTML：

<div class="div1"></div>

<textarea class="t" num="1"></textarea><button class="b" num="1">b1</button><br>
<textarea class="t" num="2"></textarea><button class="b" num="3">b2</button><br>
<textarea class="t" num="3"></textarea><button class="b" num="3">b3</button><br>

使用Javascript：

 $('*:not(body,html,.div1)').mouseover(function(){
     $(this).css({'border':'2px solid red'});
 });

 $('*:not(body,html,.div1)').mouseout(function(){
     $(this).css({'border':'none'});
 });

 var c1='';

 $('*:not(body,html,.div1)').click(function(){
     c1=$(this).attr('class');
     classes='<div id="'+c1+'">'+c1+'</div>';
     $('.div1').html(classes);
 });

 jQuery(document.body).on( 'mouseover', '#'+c1, function () {
    $('.'+c1).css({'border':'2px solid red'});
 });

 jQuery(document.body).on( 'mouseout', '#'+c1, function () {
    $('.'+c1).css({'border':'2px solid red'});
 });

Answer 1

当on仍为空字符串时，您运行c1方法。在click方法中运行它们：

$('*:not(body,html,.div1)').click(function(){
    c1=$(this).attr('class');
    classes='<div id="'+c1+'">'+c1+'</div>';
    $('.div1').html(classes);

    jQuery(document.body).on( 'mouseover', '#'+c1, function () {
        $('.'+c1).css({'border':'2px solid red'});
    });

    jQuery(document.body).on( 'mouseout', '#'+c1, function () {
        $('.'+c1).css({'border':'2px solid red'});
    }); 
});

Answer 2

您无需将任何内容直接绑定到.div1上的所选元素，您可以在此.div1悬停时绑定它，无论它包含什么。当你将它悬停时，你会发现它包含的内容。

每次单击元素时，您都不必费心（和取消绑定）。

你可以利用jQuery的内置绑定器（hover）并链接，你的边框消失了（按钮仍有问题）：

$('*:not(body,html,.div1)').hover(function () {
    $(this).css({
        'border': '2px solid red'
    });
}, function () {
    $(this).css({
        'border': '1px solid black'
    });
}).click(function () {
    var c1 = $(this).attr('class');
    var classesElement = $('<div></div>', {
        id: c1,
        html: c1
    });
    $('.div1').append(classes);
});

//Retrieve the contained element when you'll hover .div1
$('.div1').hover(function () {
    var selectedElementClass = $(this).children().attr('id');
    $('.' + selectedElementClass).css({
        'border': '2px solid red'
    });
}, function () {
    var selectedElementClass = $(this).children().attr('id');
    $('.' + selectedElementClass).css({
        'border': '1px solid black'
    });
});

我设置了a fiddle以防您想知道它是如何工作的。

jquery不使用变量选择器

2 个答案: