无法在父 div 中获取输入属性值答案

【问题标题】：Cant get input attr values in parent div无法在父 div 中获取输入属性值
【发布时间】：2014-03-11 09:50:02
【问题描述】：

我得到了这个 html 代码

<div class="main"><div class="labels"><p class="values"></p></div ></div>
<div id='tabs'>
<div>
    <div class="accordion">
        <div class="sub">
            <p><input type="checkbox" data="1" value="a"/> <label ></label></p>
        </div>
        <div class="sub">
            <p><input type="checkbox" data="2" value="b"/> <label ></label></p>
        </div>
        <p><input type="checkbox" data="3" value="c"/><label></label></p>
        <p><input type="checkbox" data="4" value="d"/><label></label></p>
    </div>
</div>
</div>

和JS

$(document).ready(function() {  
        labelsValue();
});         
function labelsValue(){
   var selected = $('input[type=checkbox]:checked').map(function(){
      return $.trim($(this).attr('data'));
   }).get();
   $('.labels .values').text(selected.join(', '));
}
$('input').on('change', function() {
   labelsValue();
});

制表符、手风琴、输入值和属性“数据”，a;bels 是由 php 从数组中动态生成的。当复选框选中/取消选中时，我想从 .accordion 中的每个输入中读取数据属性值，并在输入选中/取消选中时显示在 p class="values" dynamic 中。

但是使用此代码，我只能从具有类 .sub 的 div 内的输入中获得来自数据属性的正确显示值。但它不适用于父 .accordion div 中的输入。当我选中这些复选框时，它只显示带逗号的字符串，例如“, , , , ,”。

如何解决它，我希望代码能够与 .accordion div 中的所有子输入一起使用。

帮助别人？

【问题讨论】：

你在 $('input') 之后缺少 .on，它应该读作 $('input').on('change', function () {});

标签： jquery html dom

【解决方案1】：

您必须将事件委托给文档：

$(document).on('change', 'input', function() {
   labelsValue();
});

因为您尚未准备好文档中的更改事件，因此不会触发。

另一种方法是将其放入准备好的文档中：

$(document).ready(function() {  
    labelsValue();

   $('input').on('change', function() { // <----put it here
        labelsValue();
   });
}); // <---end of doc ready

或简化的方式：

$(document).ready(function() {  
    labelsValue();

   $('input').on('change', labelsValue);// <---put it here

}); // <---end of doc ready

【讨论】：

【解决方案2】：

你需要在jquery中使用on函数

 $('input').on('change', function() {
         labelsValue();
 });

而不是

 $('input')('change', function() {
        labelsValue();
    });

【讨论】：

【解决方案3】：

试试这个。

$('input').on('change', function() {
            labelsValue();
        });

如果您的数据是动态的，请尝试这种方法。

$(document).on('change', 'input', function() {
   labelsValue();
});

Fiddle Demo

【讨论】：

你错过了 .on "$('input')('change', function(){})"
将代码复制到堆栈时我错过了，$('input').on('change', function() { labelsValue(); });在代码中，它不适用于 .accordion div 中的输入。

【解决方案4】：

试试这个：

$(document).ready(function() {  
        labelsValue();
});         
function labelsValue(){
    var dataValue="";
   $('input[type=checkbox]').each(function(){



          if($(this).prop("checked")){

           dataValue +=$(this).attr('data')+',';

          }

        });

    $('.labels .values').text(dataValue);


}
$('input').change(function() {
   labelsValue();
});

JSFiddle :http://jsfiddle.net/tLS8M/6/

【讨论】：