http://jsfiddle.net/nesreen/m5TMF/763/

$("#AddansId").click(function(){
//get the parent of the div with id(Collapse+x)
// to abend the data content of the textarea beside the word
//Account Registeration at PrepBootstrap
});

我可以用按钮创建一个动态手风琴在每个手风琴里面，我需要制作另一个textarea和按钮，在同一个折叠中添加另一个文本但我面临的问题是，即使父ID也是动态的，我怎样才能在每次获得按钮的父级

Answer 1

让我们看看。这里有几个步骤：

首先，您需要以不同的方式绑定点击次数（ event delegation ），因为您想点击动态添加元素
其次，我们使用closest()方法和attr('id')
要获取textarea值，您可以使用 $(this).parent().prev().find('textarea').val()
然后使用append()方法将文字附加到您想要的单词旁边，最后使用$(this).closest('.container').append(answer);在单词之前添加文本（这有点不清楚所以我之前添加了它Account Registeration at PrepBootstrap。我希望这就是你的意思）

＆＃13;

var x = 1;
$(document).on('click', "#AddansId", function() {
  var idOfParent = $(this).closest('.panel-collapse').attr('id');
  //console.log(idOfParent);
  var answer = $(this).parent().prev().find('textarea').val();
  $(this).closest('.container').append(answer);
});

$(document).on('click', '#AddQuestId', function() {
  x = x + 1;
  $("#accordion").append('<div class="panel panel-default">' +
    '<div class="panel-heading">' +
    '<h4 class="panel-title"> ' +
    '<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse' + x + '">' + $("#comment").val() + '</a>  </h4>' +
    '</div>' +
    '<div id="collapse' + x + '" class="panel-collapse collapse in">' +
    '<div class="panel-body">' +
    '<div class="container">  ' +
    ' <form>' +
    '<div class="form-group" >' +
    '<label for="comment">answer:</label>' +
    '<textarea class="form-control" rows="5" id="answer' + x + '"></textarea> ' +
    '  </div>' +
    ' <div style="float: right;"> <input type="button" class="btn btn-info" value="answer" id="AddansId"></div>' +

    '</form>' +
    '</div>' +
    'Account registration at <strong>PrepBootstrap</strong>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</h4>' +
    '</div>');
});

＆＃13;

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <form>
    <div class="form-group">
      <label for="comment">Comment:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
    <div style="float: right;"> <input type="button" class="btn btn-info" value="Add Question" id="AddQuestId"></div>

  </form>
</div>

<div class="panel-group" id="accordion">
</div>

＆＃13;

动态手风琴发布和回答

http://jsfiddle.net/nesreen/m5TMF/763/

1 个答案: