Agrego un valor a mi cuerpo HTML a través de la función .append(). Más tarde, necesito recuperar este valor, pero no puedo porque se agrega dinámicamente. Busqué la causa y descubrí que tengo que usar .find(). Pero incluso con este método no puedo agarrar la cadena. ¿Finalmente ves mi error?

$(document).ready(function(){

    // data[0] = "Tesla X"
    $("body").append('<div id="myCar" data-car="' + data[0] + '"></div>');

    $(document).on('click', '#save', function(e){  
        e.preventDefault(); 

        var page0    = $(this).data('car');  
        var page1    = $('body').find('[data-car]');
        var page2    = $('myCar').find('[data-car]');  
        var page3    = $(document.getElementById('[data-car]')); 
        var page4    = $('#body').find('.bottom').data('car');
        var page5    = $('body').find('.bottom').data('car');
        var page6    = $('body').find('[data-car]');
        var page7    = $('body').find('#myCar').data('data-car');
        console.log(page0);  // not working -> undefined 
        console.log(page1);  // not working -> Object { 0: <div#myCar>, length: 1, prevObject: Object } 
        console.log(page2);  // not working -> Object { length: 0, prevObject: Object } 
        console.log(page3);  // not working -> Object {  } 
        console.log(page4);  // not working -> undefined 
        console.log(page5);  // not working -> undefined 
        console.log(page6);  // not working -> Object { 0: <div#myCar>, length: 1, prevObject: Object } 
        console.log(page7);  // not working -> undefined 
    });

});
2
Magiranu 30 oct. 2017 a las 16:48

3 respuestas

La mejor respuesta

Ver por qué no funciona desde el comentario del fragmento

$(document).ready(function(){

    // data[0] = "Tesla X"
    $("body").append('<div id="myCar" data-car="' + data[0] + '"></div>');

    $(document).on('click', '#save', function(e){  
        e.preventDefault(); 

        var page0    = $(this).data('car');  //invalid attribute its target the clicked element not data-car element
        var page1    = $('body').find('[data-car]');//valid one.you are get the element object only
        var page2    = $('myCar').find('[data-car]');  //invalid one missing id mention from beginig `#`
        var page3    = $(document.getElementById('[data-car]')); //invalid jquery object.you are confusing jquery object and js 
        var page4    = $('#body').find('.bottom').data('car');//body its tag not a id name
        var page5    = $('body').find('.bottom').data('car'); //bottom class not in a html
        var page6    = $('body').find('[data-car]'); //its same like page2
        var page7    = $('body').find('#myCar').data('data-car'); //already you are calling the data() function.so its get invalid attribute value .its searching like `data-data-car`

      var page8=$('body').find('[data-car]').data('car')//correct one

      console.log(page0);  // not working -> undefined 
        console.log(page1);  // not working -> Object { 0: <div#myCar>, length: 1, prevObject: Object } 
        console.log(page2);  // not working -> Object { length: 0, prevObject: Object } 
        console.log(page3);  // not working -> Object {  } 
        console.log(page4);  // not working -> undefined 
        console.log(page5);  // not working -> undefined 
        console.log(page6);  // not working -> Object { 0: <div#myCar>, length: 1, prevObject: Object } 
        console.log(page7);  // not working -> undefined 
    });

});
1
prasanth 30 oct. 2017 a las 14:04

Para recuperar el elemento:

var elem = $('#myCar')

Para recuperar su atributo:

$('#myCar').attr("data-car") 

Finalmente :

var value = $('#myCar').attr("data-car") //Value == Tesla X
0
PaulDennetiere 30 oct. 2017 a las 14:04

Tratar de usar:

$(document).ready(function(){

     var data = "Tesla X"
     $("body").append('<div id="myCar" data-car="' + data + '"></div>');

     var page0   = $(document).find('#myCar');
     console.log(page0);


});
0
YouneL 30 oct. 2017 a las 13:57