Question

我正在动态加载我页面中的一些内容，并希望获得所有数据属性。

首先克隆并附加元素

$('.chip').on('click', function () {
  $(this).clone().appendTo('.chipPlacement');
});

然后我写了一个应该得到总数的函数

function chipsBet() {
  var redchip = $('.chipPlacement .chipValue.r').data() || 0;
  var bluechip = $('.chipPlacement .chipValue.b').data() || 0;
  var orangechip = $('.chipPlacement .chipValue.o').data() || 0;

  var total = redchip.chipValue + bluechip.chipValue + orangechip.chipValue;
  return total;

}

在我附加HTML之前的元素

<div class="chipPlacement"></div>

并且一旦附加HTML结构就是

 <div class="chipPlacement">
     <div class="chip red">
       <div class="chipValue r" data-chip-value="1">1</div>
     </div>
 </div>

我需要监听DOM结构的变化，然后激活chipsBet()函数，但我不知道如何让它工作。我无法使用.on('change')，因为它仅适用于input，textarea和select。

我尝试在chipsBet内触发.chip.on('click')功能但我返回了NaN。

如何获取DOM中新元素的data-attribute-values？

Answer 1

如果您没有蓝色或橙色芯片，那么您有效地尝试从.chipValue 0获取undefined，并将其添加到另一个数字会给您{{} 1}}。

您可以简单地迭代放置元素中的所有NaN元素，如下所示：

.chipValue

Answer 2

没关系，你改变了你最初的问题......继续。

<div class='chipPlacement'>
    <div class='chip red'>
        <div class='chipValue' data-chip-value='1'></div>
    </div>
</div>

然后，要阅读您的数据属性，您可以执行以下操作。

$('.chip').on('click', function () {
    $(this).clone().appendTo('.chipPlacement');
    chipsBet();
});

function chipsBet() {
    var redchipVal = parseInt($('.chipValue .r').data('chip-value')) || 0;
    var bluechipVal = parseInt($('.chipValue .b').data('chip-value')) || 0;
    var orangechipVal = parseInt($('.chipValue .o').data('chip-value')) || 0;

    var total = redchipVal + bluechipVal + orangechipVal;
    return total;
}

Answer 3

我想你想要像波纹管那样的东西。每当div .chipPlacement中的任何更改发生时，它都会调用该函数。

$('.chipPlacement').bind("DOMSubtreeModified",function(){
    console.log('Div modified');
});

你可以说你的问题

$('.chipPlacement').bind("DOMSubtreeModified",function(){
     chipsBet();
});

DEMO

获取所有数据属性值的总和

3 个答案: