将事件添加到已添加的动态 DOM 按钮 - jQuery

戴夫克

我已经阅读了几乎所有关于此的可用主题。他们中的大多数人重复“你应该写 .on('click' function(){}) 并解决你的问题。所以 - 我动态添加了按钮,我已经为这个按钮定义了一个事件。会发生什么me - 单击按钮 -> 将页面重定向到末尾带有问号的相同 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>

希望我尽可能清楚地提出问题。

查理特

默认类型<button>是“提交”

因此,要在表单中使用按钮进行提交以外的操作,请使用

<button type="button">

听起来您正在导致页面由于浏览器表单提交而重新加载

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用选定的jQuery将事件添加到按钮后,将事件添加到按钮

来自分类Dev

如何将jquery ui事件处理程序动态添加到动态创建的按钮?

来自分类Dev

动态添加到DOM的对象不响应jQuery事件

来自分类Dev

动态添加到DOM的对象不响应jQuery事件

来自分类Dev

添加到DOM后,jQuery按钮不会触发

来自分类Dev

jQuery-将事件侦听器添加到动态创建的按钮

来自分类Dev

将悬停并单击事件添加到下拉按钮-Jquery

来自分类Dev

将JQuery功能添加到动态创建的单选按钮

来自分类Dev

使用jQuery将单选按钮动态添加到div

来自分类Dev

将JQuery功能添加到动态创建的单选按钮

来自分类Dev

React Native-在按下按钮时将元素动态添加到DOM

来自分类Dev

如何将jQuery click事件添加到Django admin保存并继续按钮?

来自分类Dev

jQuery-无法通过onClick事件将类添加到按钮

来自分类Dev

将jQuery click事件添加到生成的按钮后面的代码中

来自分类Dev

将jQuery click事件添加到KendoUI网格列模板中的按钮

来自分类Dev

使用JS / JQuery按类选择文档后,将onclick事件添加到按钮

来自分类Dev

jQuery-无法通过onClick事件将类添加到按钮

来自分类Dev

动态将事件监听器添加到dom

来自分类Dev

动态将事件监听器添加到dom

来自分类Dev

使用jQuery将“删除”按钮动态添加到HTML表中

来自分类Dev

如何使用Jquery动态将按钮添加到li标签

来自分类Dev

jQuery-将显示/隐藏按钮动态添加到每个DIV

来自分类Dev

尝试将事件动态添加到jQuery事件日历

来自分类Dev

如何使用jquery将react组件添加到DOM?

来自分类Dev

jQuery选项将URL添加到按钮

来自分类Dev

将值添加到jquery函数的按钮

来自分类Dev

jQuery的.load()不添加到DOM?

来自分类Dev

使用jQuery将“ onClick”事件添加到动态div

来自分类Dev

jQuery datepicker将单击事件添加到上一个下一个按钮

Related 相关文章

  1. 1

    使用选定的jQuery将事件添加到按钮后,将事件添加到按钮

  2. 2

    如何将jquery ui事件处理程序动态添加到动态创建的按钮?

  3. 3

    动态添加到DOM的对象不响应jQuery事件

  4. 4

    动态添加到DOM的对象不响应jQuery事件

  5. 5

    添加到DOM后,jQuery按钮不会触发

  6. 6

    jQuery-将事件侦听器添加到动态创建的按钮

  7. 7

    将悬停并单击事件添加到下拉按钮-Jquery

  8. 8

    将JQuery功能添加到动态创建的单选按钮

  9. 9

    使用jQuery将单选按钮动态添加到div

  10. 10

    将JQuery功能添加到动态创建的单选按钮

  11. 11

    React Native-在按下按钮时将元素动态添加到DOM

  12. 12

    如何将jQuery click事件添加到Django admin保存并继续按钮?

  13. 13

    jQuery-无法通过onClick事件将类添加到按钮

  14. 14

    将jQuery click事件添加到生成的按钮后面的代码中

  15. 15

    将jQuery click事件添加到KendoUI网格列模板中的按钮

  16. 16

    使用JS / JQuery按类选择文档后,将onclick事件添加到按钮

  17. 17

    jQuery-无法通过onClick事件将类添加到按钮

  18. 18

    动态将事件监听器添加到dom

  19. 19

    动态将事件监听器添加到dom

  20. 20

    使用jQuery将“删除”按钮动态添加到HTML表中

  21. 21

    如何使用Jquery动态将按钮添加到li标签

  22. 22

    jQuery-将显示/隐藏按钮动态添加到每个DIV

  23. 23

    尝试将事件动态添加到jQuery事件日历

  24. 24

    如何使用jquery将react组件添加到DOM?

  25. 25

    jQuery选项将URL添加到按钮

  26. 26

    将值添加到jquery函数的按钮

  27. 27

    jQuery的.load()不添加到DOM?

  28. 28

    使用jQuery将“ onClick”事件添加到动态div

  29. 29

    jQuery datepicker将单击事件添加到上一个下一个按钮

热门标签

归档