Question

我正在尝试创建一个问题列表，人们可以在其中添加自己的类别和问题。这仅适用于第一个，如果我不断添加类别，那么添加问题的能力就会停止。

我将.click函数更改为on.("click")，但这没有结果。

每次创建一个新类别时，我都会在i中添加一个类别，然后将该数字添加到我的问题添加按钮中，并使用该组合作为我的ID来触发该函数。

我的代码：

// Category
var i = 1;
$('#addcategory').click(function() {
  i++;
  $('#dynamic_field').append('<div class="row" id="row' + i + '"><div class="col-md-8"><ul class="categorylist"><li><input type="text" name="category[]" placeholder="' + i + '. Voeg een categorie toe" class="form-control name_list" /><div class="row" id=questionrow"' + i + '">  <div class="col-md-8"> <ul class="questionlist">  <li> <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list" />  </li> </ul>  </div>  <div class="col-md-4"> <button type="button" name="addquestion" id="addquestion' + i + '" class="btn btn-success questionbutton">Extra vraag</button>  </div> </div></li></ul></div><div class="col-md-4"><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></div>');
});
$(document).on('click', '.btn_remove', function() {
  var button_id = $(this).attr("id");
  $('#row' + button_id + '').remove();
});

// Question
var e = 1;
$('#dynamic_questionfield').on("click", "#addquestion" + i + "", function() {
  e++;
  $('#dynamic_questionfield').append('<div class="row" id="questionrow' + e + '"> <div class="col-md-8"> <ul class="questionlist"> <li> <input type="text" name="question[]" placeholder="' + e + '. Voeg een vraag toe" class="form-control name_list"> </li> </ul> </div><div class="col-md-4"><button type="button" name="remove" id="' + e + '" class="btn btn-danger removequestion btn_remove">X</button></div></div>');
});
$(document).on('click', '.btn_remove', function() {
  var button_id = $(this).attr("id");
  $('#questionrow' + button_id + '').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamic_field">
  <div class="row">
    <div class="col-md-8">
      <ul class="categorylist">
        <li>
          <input type="text" name="category[]" placeholder="1. Voeg een categorie toe" class="form-control name_list" />
          <div id="dynamic_questionfield">
            <div class="row">
              <div class="col-md-8">
                <ul class="questionlist">
                  <li>
                    <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list" />
                  </li>
                </ul>
              </div>
              <div class="col-md-4">
                <button type="button" name="addquestion" id="addquestion1" class="btn btn-success questionbutton">Extra vraag</button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
      <button type="button" name="addcategory" id="addcategory" class="btn btn-success">Extra categorie</button>
    </div>
  </div>
</div>

Answer 1

如果元素#dynamic_questionfield是动态的，请替换

$('#dynamic_questionfield').on("click","#addquestion"+i+"", function(){

与

$(document).on("click","#addquestion"+i+"", function(){

为什么即使使用“开”，此点击功能也无法触发？

1 个答案: