jquery更改动态创建的列表

时间:2013-04-30 17:20:16

标签: jquery

我正在使用Jquery创建一些列表。 有1个文本框。用户提供一些数据。 当用户按下按钮时,该数据被复制并添加到div。

$("#Add").click(function(){
   var val = $('[name=Variablename]').val();
     var masterHTML = '<input type="checkbox" name="'+val+'">'+val+'   '+val+'  '+'<br>';
                $("#main").append( masterHTML);
          });   

现在列表可以说是个例子:

sampletext1
sampletext2
sampletext3
sampletext4
sampletext5
sampletext6

每个旁边都会有一个检查按钮。 因为这是所有动态数据。 所以当用户检查说sampletext1时。我怎样才能获得这些数据。 基本上我正在考虑在文本框中显示数据,以便用户可以将sampletext1更新为sampletext1update并将其发回。

我该怎么做。 我没有使用表格(或)表格。只需div并添加带复选按钮的文本

div主要是:

<div id="main">
</br>
</div>

1 个答案:

答案 0 :(得分:1)

单向...给你动态生成的所有复选框一个类(同一个类)..说checkboxClass ...并为此调用click事件

$('#main').on('change','.checkboxClass',function(){
   if($(this).is(':checked')){
       alert($(this).val());
    }
   });

并且你需要定义复选框的value属性才能使用(在上面的代码中缺少)....再次,因为这是复选框用户可以选择多个...你有没有想过这个。 ??

<强>更新

然后动态创建一个按钮以及具有相同类的复选框..隐藏它......

 $("#Add").click(function(){
     var val = $('[name=Variablename]').val();
     var masterHTML = '<input class="checkboxClass" type="checkbox" value="'+val+'" name="'+val+'">'+val+'   '+val+'  '+ '<button class="buttonClass">update</button><br>';
     $("#main").append( masterHTML);
      $('.buttonClass').hide(); //hide button
  });   


  $('#main').on('change','.checkboxClass',function(){
    $('.buttonClass').hide(); //make sure all other button is hidden
    if($(this).is(':checked')){ //<--here missed bracket
        $(this).next('.buttonClass').show(); //show the button that is just clicked
    }
   });

  //code to update on click of button
  $('#main').on('click','.buttonClass',function(){
       $('#yourtextBoxId').val($(this).prev().val());
  });