向添加的动态DOM按钮添加事件-jQuery

时间:2018-07-28 13:13:45

标签: javascript jquery dom

我已经阅读了几乎所有可用的主题。 他们中的大多数人都重复了“您应该编写.on('click'function(){})”,这可以解决您的问题。 所以-我动态添加了按钮,并为此按钮定义了一个事件。 我该怎么办-单击按钮->将页面重定向到末尾带有问号的相同URL-> localhost:3000 / blabla / bla? 重定向之前,它会更改值,然后删除按钮的DOM容器并进行重定向 我尝试过各种定义位置- 文档准备功能中的第一个,
然后在静态包装器中准备好
然后在准备好的文档中的静态包装器中
等等...
另外,我试图做一个外部函数。

<script>
$(function(){

$('#new-order').on('click',function(e) {
$('#bottom').slideToggle(1000);
});

// btn-delete-item event

// btn-increase event

    $('#items').on('click','.btn-increase',function(){
    console.log("HEY")
    quantityLabel = $(this).parent().find('#line-item-quantity');
    addedQntty = parseInt(quantityLabel.text())+1;
    quantityLabel.text(addedQntty);
    console.log('added quantity')
});

// btn-decrease event

// btn-add-item event
$('.btn-add-item').on('click',function(){
    var prodID,quantity,html,itemID,itemTitle,itemPrice,itemDOM,prodPrice;
    prodID = $(this).parent().attr('id');
    itemTitle= $(this).parent().find('#title').text();
    quantity = $(this).parent().find('input').val();
    prodPrice= $(this).parent().find('#price').text();
    itemPrice = parseInt(quantity)*parseInt(prodPrice);
    itemDOM = $('#items').children();
    itemDOM.length>0 ? itemID=itemDOM.last().attr('id').slice(-1) : itemID = 0;
    html = `<div id="line-item-${itemID}">Title:<label id="line-item-name">${itemTitle}</label>Price:<label id="line-item-price">${itemPrice}</label>quantity<label id="line-item-quantity">${quantity}</label><button class="btn-decrease">-</button><button class="btn-increase">+</button><button class="btn-delete-item">delete</button></div>`;
    $('#items').append($(html));
});
});
</script>

希望我尽可能清楚地说明问题。

2 个答案:

答案 0 :(得分:0)

<button>的默认类型为“提交”

因此,可以将表单中的按钮用于除提交使用之外的其他操作

<button type="button">

听起来好像是由于浏览器提交表单导致页面重新加载

答案 1 :(得分:0)

在您要添加df.groupby(['identifier']).status.agg(lambda x: myfunc(x)) #same as df.groupby(['identifier']).status.agg(myfunc) 的添加项按钮的单击功能上,只需修复此问题然后再试一次,像这样写

$(html)

您声明了一个变量“ html”,并在代码中尝试附加整个html。 希望能解决它。