Ajax链接为列表项
Ajax链接为列表项
提问于 2019-12-04 18:19:14
我想做的事情，，我正在构建一个简单的UI，您可以在带有普通Javascript的数组中动态搜索。结果列表是用AJAX从Django后端获取数据并以模式显示细节的链接。
我得到的搜索的结果列表很好。但是，如果我单击链接，则不会触发AJAX函数。
如果我在HTML中直接尝试相同的链接(不是由Javascript生成的)，它可以很好地工作，并调用该函数。
Note没有注意到东西的Django部分。我只想知道为什么在Javascript列表中生成链接时不调用AJAX函数。
任何线索都欢迎。提前感谢！
let arr = ["anagrams-of-string-(with-duplicates)", "array-concatenation", "array-difference", "array-includes",]
function updateResult(query) {
let resultList = document.querySelector(".result");
resultList.innerHTML = "";
arr.map(function(algo){
query.split(" ").map(function (word){
if(algo.toLowerCase().indexOf(word.toLowerCase()) != -1){
resultList.innerHTML += `<li class="list-group-item">
<a href="" id="${algo}" data-id="${algo}" class="artist-title show_product" style="color: black; padding-left: 0;" data-toggle="modal">${algo}test</a>
</li>`;
console.log("This works fine");
}
})
})
}
$(function(){
$('.show_product').on('click', function (e) {
e.preventDefault();
let product_id = $(this).attr('id');
console.log("This function is called");
$.ajax({
url:'/backend/form-fill/',
type:'POST',
data: $('#form_have_product_'+product_id).serialize(),
success:function(response){
console.log(response);
$('.show_product').trigger("reset");
openModal(response);
},
error:function(){
console.log('something went wrong here');
},
});
});
});
function getFormData(content_data){
$('#categoria_producto').text(content_data.field1);
$('#estatus_contenido').text(content_data.field2);
$('#descripcion_brief').text(content_data.field3);
$('#descripcion_long').text(content_data.field4);
};<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group" style="position: fixed; top: 0; z-index: 10;">
<input oninput="updateResult(this.value)" style="font-size: 3rem; height: 15vh;" type="search" class="form-control" placeholder="Search..." />
</div>
<div>
<ul class="list-group result" style="margin-top: 15vh;"></ul>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-04 18:33:52
$('.show_product').on('click', function (e) {上面的内容是选择DOM中尚未存在的元素，因为它们是从搜索中动态创建的。要想将事件侦听器添加到动态创建的元素中，必须将其更改为：
$(document).on('click', '.show_product', function(e) {它说的是，“事件附加到文档，当我们单击文档时，我们检查目标，看看它是否是我们想要的元素。”(基本上)一种简短的说法：
$(document).on('click', function(e) {
if (e.target == document.querySelector('.show_product')) {
// do the thing
}
});Stack Overflow用户
发布于 2019-12-04 18:35:29
您最好在动态UI中使用委托事件。请参阅https://api.jquery.com/on/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59182457
复制相关文章
相似问题
腾讯云开发者
