Question

我正在尝试创建一个表单，其中有一个字段，用户输入 productName 。

当用户输入产品名称时，产品列表为通过带有 ADD按钮的ajax向他显示。当用户点击添加按钮时， productName 会在jquery的帮助下写入带有删除按钮的<div>。

直到这里一切正常。现在我希望如果用户点击删除按钮，则该产品名称从该特定 <div> tag中删除。它第一次有效。但是当我点击下一个项目的删除按钮时。它不起作用。这是我的 jquery代码

代码：

$(function(){

$('.addProducts').keyup(function(event)
{
var searchVal=$(this).val().trim();
if(searchVal.length > 0)
{
$.ajax({
url: 'http://localhost/myurl',
data: {
products: $(this).val(),
},
type: 'POST',
dataType: 'html',
success: function(msg)
{
$('#printTheProducts').html(msg);
var productVal=$(this).attr('name');
var addedProductsValue=$('#myAddedProducts').html();
var textValueOfProducts=$('#myAddedProducts').text();
var deleteButton='<input type="button" class="deleteButton" value="Delete" name="'+productVal+'">';
if(textValueOfProducts.length===0)
{

$('#myAddedProducts').html(productVal+deleteButton);   
}
 else
{
var checkAddedProducts=textValueOfProducts.split(",");
if(checkAddedProducts.indexOf(productVal) < 0)
{
    $('#myAddedProducts').html(addedProductsValue+','+productVal+deleteButton);
}
 else
{
alert(productVal+' is already added');
}
 }
                            --------------------------------------------------------------------------------------------
Code where I am Getting problem

$('.deleteButton').click(function()
{   
 var productsTextArray=new Array();
 var productsHtml;
var productsHtmlArray=new Array();
var deleteVal=$(this).attr('name');
 var myAddedProductsTextValue=$('#myAddedProducts').text().trim();
if(myAddedProductsTextValue.length > 0)
{
productsTextArray=myAddedProductsTextValue.split(",");
productsHtml=$('#myAddedProducts').html();
productsHtmlArray=productsHtml.split(",");

}
var deleteId=$.inArray(deleteVal,productsTextArray);
productsHtmlArray.splice(deleteId,1);
// if I add 
$('#myAddedProducts').html(productsHtmlArray.join());
then it prevents this function from working next time.I do not understand why

});
                            --------------------------------------------------------------------------------------------
});

}
});
}
 }); 

    });

<小时/> 的问题
如何使此删除按钮适用于所有产品名称，以便它可以从<div>

中删除该产品的名称

Answer 1

很难理解你的代码在没有一个小提琴演示的情况下正在做什么。

第二次在删除按钮上触发click事件吗？

如果没有，则问题是事件处理程序。

你可以试试这个：$（'body'）。on（'click'，'。deleteButton'，function（）{ //把代码放在这里为了提高效率，请将“body”替换为删除按钮的较近父级。 }）; http://api.jquery.com/on/

如果点击事件被触发，那么问题可能就在这里：

 var deleteVal=$(this).attr('name');

Answer 2

我看到您为所有产品创建了一个删除按钮，并将其名称属性分配给上次添加的产品。因此，当您单击删除按钮时，它仅删除最后一个产品。

无法使用jquery从DIV标记中删除产品

2 个答案: