Question

我试图让我的网站有额外的客户产品，我已经能够让jQuery通过AJAX将新的额外内容添加到数据库中，然后将结果附加到HTML。

但是我遇到了删除问题，例如客户是否改变主意并且不再需要额外费用。

此代码添加带有数据的HTML和删除按钮。

$.each(data.extras, function (k, o) {
  $('#insertExtras').append('<div id="'+k+'"><div class="col-md-1">'+k+':</div><div class="col-md-7"><strong>'+o.extraName+'</strong> ('+o.extraPriceRadio+o.extraPrice+')</div><div class="col-md-4"><a id="removeExtra'+k+'" class="btn btn-sm btn-dark ladda-button" data-style="expand-left"><span class="ladda-label">Remove</span></a></div></div><br /><br />');    
});

这是上面的按钮：

<a id="removeExtra'+k+'" class="btn btn-sm btn-dark ladda-button" data-style="expand-left"><span class="ladda-label">Remove</span></a>

id里面会有一个数字，如：removeExtra0，removeExtra1，removeExtra2等

现在当我尝试让jQuery获得点击的按钮时，它什么也没做！

$('a[id^="removeExtra"]').on('click', function() { 
  alert('clicked');
  console.log('Picked: '+ $(this).prop("id"));              
});

我只想要点击按钮的ID。所以我可以将其切片并用它来移除那一行。

由于

Answer 1

您需要使用event-delegation来动态添加元素

$('#insertExtras').on('click','[id^="removeExtra"]',function(){
     console.log('Picked: '+ this.id);  
});

Answer 2

您正在使用.on错误的方式使用它

$(document).on('click','a[id^="removeExtra"]', function() { 
        alert('clicked');
        console.log('Picked: '+ $(this).prop("id"));                
    });

Read about .on

Answer 3

您需要在添加后放置事件侦听器。

//first run the loop
$.each(data.extras, function (k, o) {
    $('#insertExtras').append('<div id="'+k+'"><div class="col-md-1">'+k+':</div><div class="col-md-7"><strong>'+o.extraName+'</strong> ('+o.extraPriceRadio+o.extraPrice+')</div><div class="col-md-4"><a id="removeExtra'+k+'" class="btn btn-sm btn-dark ladda-button" data-style="expand-left"><span class="ladda-label">Remove</span></a></div></div><br /><br />');    
});
// then you can add the listener
$('a[id^="removeExtra"]').on('click', function() { 
    alert('clicked');
    console.log('Picked: '+ $(this).prop("id"));                
});

jQuery从jQuery附加数据中获取点击的ID

3 个答案: