Javascript 我的点击事件功能在某些情况下停止工作，我可以'；找不到该代码失败的地方

代码的目的是从表行中读取数据目标，并使用类“box”将其与每个div上的数据目标进行比较。如果两个数据目标相等，我将向[div]添加一个类，它将使用css创建脉冲效果

代码适用于某些行，但对于某些行，代码根本不会运行

$（文档）.ready（函数（）{
变量名称=[
{
“名称”：“电缆”，
“位置”：“7-3”
},
{
“姓名”：“卡片”，
“位置”：“12-4”
},
{
“名称”：“计算机”，
“位置”：“69-4”
},
{
“名称”：“Cpu”，
“位置”：“69-6”
},
{
“名称”：“CSS”，
“位置”：“6-5”
},
{
“名称”：“立方体”，
“位置”：“12-3”
},
{
“名称”：“磁盘”，
“位置”：“39-1”
},
{
“名称”：“Gpu”，
“位置”：“33-2”
},
{
“名称”：“Html”，
“位置”：“62-3”
},
{
“名称”：“内存”，
“位置”：“60-5”
},
{
“名称”：“监视器”，
“位置”：“14-1”
},
{
“名称”：“鼠标”，
“位置”：“83-4”
},
{
“名称”：“PHP”，
“位置”：“74-2”
},
{
“名称”：“Python”，
“位置”：“7-2”
},
{
“名称”：“Pyhton”，
“位置”：“13-2”
}
];
var obj=名称；
var tmp=''；
var mapDot=''；
var btData=''；
变量id=“”；
变量id2=“”；
var addclass=‘脉冲’；
var html=”“+
“名称位置”；
$。每个（对象、功能（键、值）{
//为数组中的每个对象在地图上生成一个模态体和一个点
mapDot+=''；
btData+=''
tmp+=''；
tmp+=''；
tmp+=''；
tmp+=''；
tmp+=''+''详细信息，用于“+value.name+”；
tmp+=''；
tmp+='×；'；
tmp+=''+'名称：“+value.Name+”
“+”位置：“+value.Location+”；
tmp+=''；
tmp+=''；
tmp+=''；
html+=“”+value.name+“”+value.location+“”；
});
$（“.table responsive”）.html（html++++”）；//将表附加到html正文中
$（“#示例”）.DataTable（）；//将表转换为数据表
$（'.info_-box_-sidebar'）.prepend（tmp）；//在左侧显示信息滑块
$（'.map-1'）.prepend（mapDot）；//显示地图中的每个点
//单击红点时，添加脉冲效果
变量信息=$（“.box”）。单击（函数（）{
info.removeClass（addclass）；
$（此）.addClass（addClass）；
});
/*单击一行时，将数据目标与地图上的点进行比较
如果相等，则添加脉冲效应*/
$（'td'）。在（“单击”，函数（）上）{
var id=$（this.attr（'data-target'）；
$（“.box”）.removeClass（addclass）；
$（“.box”）。每个（函数（）{
var id2=$（this.attr（'data-target'）；
如果（id==id2）{
$（此）.addClass（addClass）；
}
});
});
//当Boostrap模式关闭时，移除“脉冲”类
$（“.close”）。单击（函数（）{
$（“.box”）.removeClass（addclass）；
});
}); // 文件结束。准备好了吗

.map{
边缘底部：30px；
}
.盒子{
宽度：50px；
高度：50px；
背景色：#D63134；
边界半径：50%；
显示：块；
浮动：左；
}
.模态背景{
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
z指数：1！重要；
背景色：#000；
}
body.modal-open{
溢出：可见！重要；
}
.modal-backgrow.show{
不透明度：0！重要；
}
.模态内容{
边界半径：0！重要；
}
#示例_包装{overflow-y:hidden；}
.fa加圆圈{颜色：0275d8；右边距：5px；}
.模态对话框{
位置：固定；
顶部：20px；
底部：0；
左：0；
z指数：10040；
溢出：自动；
溢出y：自动；
宽度：16.70%；
}
格林博士{
背景：绿色；
}
主体。模态打开{
溢出：可见！重要；
}
.颜色{
背景颜色：绿色；
}
/*css测试*/
.脉搏{
显示：块；
宽度：50px；
高度：50px；
边界半径：50%；
背景：#3FBF3F；；
光标：指针；
盒影：0 rgba（63191,63,0.4）；
动画：脉冲2s无限；
}
@-webkit关键帧脉冲{
0% {
-网络工具包盒阴影：0 rgba（63191,63,0.4）；
}
70% {
-webkit盒阴影：0 10px rgba（63191,63,0.4）；
}
100% {
-网络工具包盒阴影：0 rgba（63191,63,0.4）；
}
}
@关键帧脉冲{
0% {
-莫兹盒阴影：0 rgba（63191,63,0.4）；
盒影：0 rgba（63191,63,0.4）；
}
70% {
-moz盒阴影：0 10px rgba（63191,63,0.4）；
盒影：0 10像素rgba（63191,63,0.4）；
}
100% {
-莫兹盒阴影：0 rgba（63191,63,0.4）；
盒影：0 rgba（63191,63,0.4）；
}
}

地图应用程序




地图
搜寻

通常是因为在页面完全加载之前绑定事件（

$（'td'）。在（“单击”，function（）{…

）上，不幸的是，您提供的代码段中似乎没有包含该事件。请确保在页面完全加载后通过将绑定放在windows load事件中来绑定事件：

$(window).on('load', function() {
    $('td').on( "click", function() {
        var id = $(this).attr('data-target'); 
        $(".box").removeClass(addclass);

        $(".box").each(function(){
            var id2 = $(this).attr('data-target'); 
            if(id === id2) {
                $(this).addClass(addclass);
            }
        });
    });
});

更重要的是，我认为你想要：

<tr>
    <td data-toggle="modal" data-target="#28-3">Cube</td>
    <td>28-3</td>
</tr>

立方体
28-3

不是

<tr>
    <td data-toggle="modal" data-target="#28-1">Cube</td>
    <td>28-3</td>
</tr>

立方体
28-3

既然您使用的是jQuery，我建议您使用单击功能：

$("Element").click(function() {
    // Your code here
});

---

既然你说问题发生了

$('#example').on( "click", "td", function() {

$('td').on( "click", function() {