Как получить доступ к конкретному динамически созданному элементу?

Question

Я создаю динамически несколько элементов, и я хочу получить доступ к определенным. Я пишу этот код, чтобы дать представление о моей проблеме настолько просто, насколько я могу.

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generate').click(function() {
    $('#divArea').append('<button id="addedButton' + (a) + '"type="button">button' + (a) + '</button>')
    $('#valuesArea').append('<div id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>')
    $('#addedDiv' + (a) + '').fadeToggle("slow");
    a++;
  })
  //this way i can get acces to only first element
  $(document).on('click', '#addedButton' + (b) + '', function() {
    $('#addedDiv' + (b) + '').fadeToggle("fast");
    b++;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea">
</div>

<button id="generate">
    Generate
</button>
<div id="valuesArea">
</div>

Если я создаю несколько кнопок с идентификатором addedButton1,2,3 etc. и нажимаю конкретную кнопку, которую я хочу .show() подходит <div> с текстом. Как мне этого добиться?

Answer 1

$(document).ready(function() {
      var a = 0;
      var b = 0;
      $('#generate').click(function() {
        $('#divArea').append('<button onclick="check('+(a)+')" id="addedButton' + (a) + '"type="button">button' + (a) + '</button>')
        $('#valuesArea').append('<div id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>')
        $('#addedDiv' + (a) + '').fadeToggle("slow");
        a++;
      })
      //this way i can get acces to only first element
      //$(document).on('click', '#addedButton' + (b) + '', //function() {
        //$('#addedDiv' + (b) + '').fadeToggle("fast");
        
        //b++;
      //})
        
    });
    function check(id){
          $('#addedDiv'+ (id)).show();
     }

<!-- begin snippet: js hide: false console: true babel: null -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea">
</div>

<button id="generate">
    Generate
</button>
<div id="valuesArea">
</div>

Answer 2

Используйте атрибут data-target в <button>, который содержит целевое содержимое id. Таким образом, вы можете легко переключать данные, ориентируясь на конкретный контент с уникальным id.

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generate').click(function() {
    $('#divArea').append('<button id="addedButton' + (a) + '"type="button" data-target="addedDiv'+(a)+'">button' + (a) + '</button>')
    $('#valuesArea').append('<div id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>')
    $('#addedDiv' + (a) + '').fadeToggle("slow");
    a++;
  })
  //this way i can get acces to only first element
  $(document).on('click', "button[data-target]", function() {
    var targetData = $(this).attr('data-target');
    $('#'+targetData).fadeToggle("fast");
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea">
</div>

<button id="generate">
    Generate
</button>
<div id="valuesArea">
</div>

Answer 3

Ошибка в том, что вы связываете событие клика только один раз с #addedButton0.

См. Переработанный код. Я добавляю атрибут data к кнопкам, который используется в событии нажатия $('#addedDiv' + $(this).data('a')).fadeToggle("fast");. При этом переменная b больше не нужна.

$(document).ready(function() {
  var a = 0;
  $('#generate').click(function() {
    $('#divArea').append('<button id="addedButton' + a + '" data-a="' + a + '" type="button">button' + a + '</button>')
    $('#valuesArea').append('<div id="addedDiv' + a + '">button ' + a + ' clicked </div>')
    $('#addedDiv' + a).fadeToggle("slow");
    a++;
  })
  //this way i can get acces to only first element
  $('#divArea').on('click', 'button', function() {
    $('#addedDiv' + $(this).data('a')).fadeToggle("fast");
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea">
</div>

<button id="generate">
    Generate
</button>
<div id="valuesArea">
</div>

Answer 4

Если вам нужно получить идентификатор кнопки, вы можете добавить его в атрибут данных и получить это значение в функции щелчка .addedButton.

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generate').click(function(){
    $('#divArea').append('<button class="generatedButton" id="addedButton'+(a)+'" data-button-id="'+(a)+'"type="button">button'+(a)+'</button>')
    $('#valuesArea').append('<div id="addedDiv'+(a)+'">button '+(a)+' clicked </div>' )
    $('#addedDiv'+(a)+'').fadeToggle("slow");
    a++;
  });
  //this way i can get acces to only first element
  $(document).on('click','.generatedButton',function(){
    b = $(this).data('button-id');
    $('#addedDiv'+(b)+'').fadeToggle("fast");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div id="divArea">
</div>

<button id="generate">
    Generate
</button>
<div id="valuesArea">
</div>
</html>

Answer 5

Присвойте класс элементу th, затем используйте $ (this) для получения определенного идентификатора и доступа к нему, как вы хотите.

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generate').click(function() {
    $('#divArea').append('<button class="btn_class" id="addedButton' + (a) + '"type="button">button' + (a) + '</button>')
    $('#valuesArea').append('<div class="div_class" id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>')
    $('#addedDiv' + (a) + '').fadeToggle("slow");
    a++;
  })
});
$(document).on('click', '.btn_class', function() {
  id = $(this).attr('id'); // To get the ID of the element
  $('this').fadeToggle("fast");
});

И так как это запрос $ (document), вы ненужно поставить это под готовую функцию. И я не думаю, что вам нужно указывать идентификатор элемента, если вы хотите только переключить его. Надеюсь, это поможет!

Answer 6

Пользователь может сделать это, добавив имя класса и используя this в Jquery.

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generate').click(function(){
     $('#divArea').append('<button class="addedButton" type="button">button'+(a)+'</button>')
     $('#valuesArea').append('<div id="addedDiv'+(a)+'">button '+(a)+' clicked </div>' )
     $('#addedDiv'+(a)+'').fadeToggle("slow");
     a++;
  })
  //this way i can get acces to only first element
  $(document).on('click','.addedButton', function(){
    $(this).fadeToggle("fast");
  })
});