Javascript 作为列表项的Ajax链接

我想做的我正在构建一个简单的UI，在这里，您可以使用纯Javascript在数组中动态搜索。结果列表是使用AJAX从Django后端获取数据并在模式中显示详细信息的链接

我得到的搜索结果列表运行良好。但是如果我点击链接，AJAX功能不会被触发

如果我直接在HTML中尝试相同的链接（不是由Javascript生成的），它工作正常，函数被调用

注意不要注意事情的Django部分。我只是想知道为什么在Javascript列表中生成链接时不调用AJAX函数

欢迎提供任何线索。提前谢谢

let arr=[“字符串的字谜-（带有重复项）”，“数组连接”，“数组差异”，“数组包含”，]
函数updateResult（查询）{
让resultList=document.querySelector（“.result”）；
resultList.innerHTML=“”；
arr.map（函数（algo）{
query.split（“”）.map（函数（word）{
if（algo.toLowerCase（）.indexOf（word.toLowerCase（））！=-1）{
resultList.innerHTML+=`

`；
log（“这工作正常”）；
}
})
})
}
$（函数（）{
$（'.show_product'）。在（'click'，函数（e）上{
e、 预防默认值（）；
让product_id=$（this.attr（'id'）；
log（“调用此函数”）；
$.ajax({
url:“/backend/form fill/”，
类型：'POST'，
数据：$（'#form_have_product_'+product_id）.serialize（），
成功：功能（响应）{
控制台日志（响应）；
$（'.show_product'）。触发器（“重置”）；
openModal（响应）；
},
错误：函数（）{
log（“这里出了点问题”）；
},
});
});
});
函数getFormData（内容\数据）{
$（'categoria_producto'）.text（content_data.field1）；
$（'estatus_contenido'）.text（content_data.field2）；
$（'description_brief'）。文本（content_data.field3）；
$（“#description_long”）.text（content_data.field4）；
};


$（'.show_product'）。在（'click'，函数（e）上{

上面选择的是DOM中尚不存在的元素，因为它们是通过搜索动态创建的。若要向动态创建的元素添加事件侦听器，必须将其更改为：

$（文档）。在（'单击'，'上。显示产品'，函数（e）{

这意味着，“事件被附加到文档中，当我们点击文档时，我们检查目标，看看它是否是我们想要的元素。”这是一种（基本上）简单的说法：

$（文档）.on（'click'，函数（e）{
if（e.target==document.querySelector（'.show_product'））{
//做那件事
}
});
$（'.show_product'）。在（'click'，函数（e）上{

上面选择的是DOM中尚不存在的元素，因为它们是通过搜索动态创建的。若要向动态创建的元素添加事件侦听器，必须将其更改为：

$（文档）。在（'单击'，'上。显示产品'，函数（e）{

这意味着，“事件被附加到文档中，当我们点击文档时，我们检查目标，看看它是否是我们想要的元素。”这是一种（基本上）简单的说法：

$（文档）.on（'click'，函数（e）{
if（e.target==document.querySelector（'.show_product'））{
//做那件事
}
});
您最好在动态用户界面中使用委派事件。请参阅
您最好在动态用户界面中使用委派事件。请参阅
问题在于您使用的是
innerHTML+=
，它清除了可能存在的所有超链接，并将它们替换为新的超链接，因为这些超链接上没有任何事件处理程序e在设置处理程序的代码运行之后。对动态创建的元素使用事件委派。问题是您使用的是
innerHTML+=
，它清除了可能存在的所有超链接，并将它们替换为新的超链接，这些超链接上没有任何事件处理程序，因为它们是在创建代码之后出现的设置已运行的处理程序。对动态创建的元素使用事件委派。Hi-Clint。它有效。奇怪的是，它只对列表的第一项有效。@FranciscoGhelfi:@ScottMarcus在谈论
innerHTML+=
情况时是正确的。使用变量构建HTML，然后设置元素的innerHTML一旦该变量被完全构造，它就可以运行。Hi Clint。它可以运行。奇怪的是，它只对列表的第一项起作用。@FranciscoGhelfi:@ScottMarcus在谈论
innerHTML+=
情况时是正确的。使用一个变量来构建HTML，然后在它完全常量后将元素的innerHTML设置为该变量他喊道。