¿Cómo obtener acceso a un elemento específico creado dinámicamente?

Question

Estoy creando dinámicamente elementos múltiples y quiero obtener acceso a elementos específicos. Escribo este código para dar una visión de mi problema tan simple como puedo.

$(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>

Si creo varios botones de identificación addedButton1,2,3 etc. y hago clic en uno específico, quiero .show() adecuado <div> con texto. ¿Cómo puedo lograr eso?

javascript jquery html

0

Dodsonnn 10 oct. 2019 a las 14:07

Answer 1

Utilice el atributo data-target en <button> que contiene el contenido objetivo id. Por lo tanto, puede alternar fácilmente los datos apuntando a contenido particular con id único.

$(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>

1

Asfan Shaikh 10 oct. 2019 a las 11:31

Answer 2

Asigne una clase al elemento th luego use $ (this) para obtener la identificación particular y acceder a ella como desee.

$(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");
});

Y dado que esta es una consulta $ (documento), no necesita poner esto en función de listo. Y no creo que necesite dar identificación al elemento si solo desea alternarlo. ¡Espero que esto ayude!

0

harshit verma 10 oct. 2019 a las 11:25

Answer 3

Si necesita obtener la identificación del botón, puede agregarlo a un atributo de datos y obtener ese valor en la función de clic .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>

1

Jamie Calder 10 oct. 2019 a las 11:29

Answer 4

El error es que vincula el evento de clic solo una vez a #addedButton0.

Ver el código refactorizado. Agrego un atributo data a los botones que se utilizan en el evento de clic $('#addedDiv' + $(this).data('a')).fadeToggle("fast");. Con esto, la variable b ya no es necesaria.

$(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>

1

kmgt 10 oct. 2019 a las 11:30

Answer 5

$(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>

1

chandu komati 10 oct. 2019 a las 11:39

¿Cómo obtener acceso a un elemento específico creado dinámicamente?

5 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript