CODEWITHSUNDEEP
javascriptjquery
twan
twan

Reputation: 2659

Why is this click function not firing even when using 'on'?

I am trying to create a question list in which people can add their own categories and questions. This works only for the first one, if I keep adding categories then the ability to add questions stops working.

I've changed my .click function to an on.("click") but this gave no result.

Everytime I create a new category I add one to i, I then add this number to my question add button and use that combination as my id to fire the function.

My code:

// 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>

Upvotes: 1

Views: 67

Answers (1)

shreyas d
shreyas d

Reputation: 774

If your element #dynamic_questionfield is dynamic, replace 

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

with 

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

Upvotes: 1

Related Questions