点击方法jQuery上没有被数组元素调用

Question

我打印出一个产品阵列到屏幕上。每个产品都有一个删除按钮正在打印。代码如下： -

const output = document.getElementById('output'); 

function delete_item(){ 
    var id = $(this).attr('data-id'); 
    console.log("ID " + id); 
} 

let productsArray = []; 

$.getJSON('/products', products => { 
    let outputContent = ''; 

    productsArray = Object.values(products); 

    productsArray.forEach(product => { 
     outputContent += `<div data-id="${ product.ID }"> 
          <div id='edit'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></div> 
          <div id='delete'><i class='fa fa-trash-o' aria-hidden='true'></i></div> 
          <div id='product'> <span class='name'> <a href=''>${product.NAME}</a></span> 
          <span class='price'>Price: £${product.PRICE}</span> 
          </div>`; 

    }); 

    $('#delete').click(function(){ 
     delete_item(); 
    }); 

    output.innerHTML = outputContent; 
}); 

目前，我只想使用delete_item函数打印出正确的产品ID。但是，该函数从不被调用。

是我的.click()函数在删除div的范围内，为什么在点击删除div时没有调用click()函数？

Answer 1

1.所有相同id多元素首先不会的时候才来上班jQuery，所以转换id到class象下面这样： -

<div class='delete'> 

2.使用Event Delegation： -

$(document).on('click','.delete',function(){ 
    delete_item($(this).parent().attr('data-id')); // pass data-id to function 
}); 

3.更改功能如下图所示： -

function delete_item(id){ 
    console.log("ID " + id); 
} 

放$.getJSON()delete function之外。

所以完整的代码是现在这个样子： -

const output = document.getElementById('output'); 

function delete_item(id){ //change in function 
    console.log("ID " + id); 
} 

let productsArray = []; 

$.getJSON('/products', products => { 
    let outputContent = ''; 

    productsArray = Object.values(products); 

    productsArray.forEach(product => { 
    outputContent += `<div data-id="${ product.ID }"> 
         <div id='edit'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></div> 
         <div class='delete'><i class='fa fa-trash-o' aria-hidden='true'></i></div> 
         <div id='product'> <span class='name'> <a href=''>${product.NAME}</a></span> 
         <span class='price'>Price: £${product.PRICE}</span> 
         </div>`; 

    }); // changed id to class 
    output.innerHTML = outputContent; 
}); 

$(document).on('click','.delete',function(){ // put click functionality outside 
    delete_item($(this).parent().attr('data-id')); // pass data-id to function 
}); 

Answer 2

您正在添加具有相同ID的多个元素。该ID在文档中应该是唯一的。相反，使用类：

productsArray.forEach(product => { 
    outputContent += ` <div data-id="${ product.ID }"> 
         <div class='edit'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></div> 
         <div class='delete'><i class='fa fa-trash-o' aria-hidden='true'></i></div> 
         <div class='product'> <span class='name'> <a href=''>${product.NAME}</a></span> 
         <span class='price'>Price: £${product.PRICE}</span> 
         </div>`; 

}); 

$('.delete').click(function(){ 
    delete_item($(this).parent().data("id")); 
}); 

这将ID发送给函数：

function delete_item(id){ 
    console.log("ID " + id); 
} 

Answer 3

你在你的概念更多的问题。首先是重复的ID使用情况，而不是单击事件绑定 - 您应该向body元素注册事件以将事件注册到新添加的元素。这里是一个工作代码：

const output = document.getElementById('output'); 

function delete_item(id){ 
    console.log("ID " + id); 
} 

let productsArray = []; 

$.getJSON('/products', products => { 
    let outputContent = ''; 

    productsArray = Object.values(products); 

    productsArray.forEach(product => { 
    outputContent += ` <div data-id="${ product.ID }"> 
         <div class='edit'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></div> 
         <div class='delete'><i class='fa fa-trash-o' aria-hidden='true'></i></div> 
         <div class='product'> <span class='name'> <a href=''>${product.NAME}</a></span> 
         <span class='price'>Price: £${product.PRICE}</span> 
         </div>`; 

}); 

$('body').on('click', '.delete', function(){ 
    delete_item($(this).parent().attr('data-id')); 
}); 

output.innerHTML = outputContent; 
});