Javascript 不使用变量选择器的jquery

我有一个动态

div

，我想在鼠标悬停时触发一个事件。 我在上使用jQuery

来触发事件选择器也是动态的，从变量中获取其内容，但它不工作！
当我将变量选择器更改为常规选择器时，它可以正常工作

HTML:


b1

b2

b3


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'});
 }); 

$（'*: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'）。单击（function（）{
c1=$（this.attr（'class'）；
类别=''+c1+''；
$（'.div1'）.html（类）；
});
jQuery（document.body）.on（'mouseover'，'#'+c1，函数（）{
$（'.+c1）.css（{'border'：'2px solid red'}）；
});
jQuery（document.body）.on（'mouseout'，'#'+c1，函数（）{
$（'.+c1）.css（{'border'：'2px solid red'}）；
}); 
当
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'});
    }); 
});

$（'*:not（body，html，div1））。单击（function（）{
c1=$（this.attr（'class'）；
类别=''+c1+''；
$（'.div1'）.html（类）；
jQuery（document.body）.on（'mouseover'，'#'+c1，函数（）{
$（'.+c1）.css（{'border'：'2px solid red'}）；
});
jQuery（document.body）.on（'mouseout'，'#'+c1，函数（）{
$（'.+c1）.css（{'border'：'2px solid red'}）；
}); 
});
您不需要将任何内容直接绑定到
.div1
上的选定元素，您可以在
.div1
的悬停处绑定它所包含的任何内容。将其悬停时，您将检测到它包含的内容

您不必在每次单击某个元素时都进行绑定（和解除绑定）

您还可以利用jQuery的内置绑定（）和链接，这样您的边框就消失了（按钮仍然存在问题）：

$（'*:not（body，html，.div1）'）。悬停（函数（）{
$（this.css）({
“边框”：“2px纯红”
});
}，函数（）{
$（this.css）({
“边框”：“1px纯黑”
});
})。单击（函数（）{
var c1=$（this.attr（'class'）；
变量classesElement=$（''{
id:c1，
html:c1
});
$（'.div1'）.append（类）；
});
//悬停时检索包含的元素。div1
$（'.div1'）。悬停（函数（）{
var selectedElementClass=$（this.children（）.attr（'id'）；
$（'..+selectedElementClass）.css({
“边框”：“2px纯红”
});
}，函数（）{
var selectedElementClass=$（this.children（）.attr（'id'）；
$（'..+selectedElementClass）.css({
“边框”：“1px纯黑”
});
});

我进行了设置，以防您想了解它是如何工作的。
那么您想根据处理程序3中处理的元素更改处理程序4和5匹配的元素吗？这似乎不太可能……无论您使用的是什么jquery，都要在动态内容加载到DOM中后使用它。例如，通常在结束正文标记上方。您需要在单击回调中声明“on”事件。
c1
在代码运行时是空字符串。。。您是否希望发生一些不同的情况？您在定义
c1
之前（单击div1之后）附加事件
$('*: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'});
    }); 
});

$('*: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'
    });
});