Javascript 通过.Find（）查找动态添加的数据属性无效

我通过

.append（）

函数将值附加到HTML正文中。稍后我需要检索这个值，但我不能，因为它是动态添加的。我搜索了原因，发现我必须使用

.find（）

。但即使使用这种方法，我也无法抓住字符串。你最终明白我的错误了吗

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

});

$（文档）.ready（函数（）{
//数据[0]=“特斯拉X”
$（“正文”）。附加（“”）；
$（文档）。在（'click'，'#save'，函数（e）{
e、 预防默认值（）；
var page0=$（this.data（'car'）；
var page1=$（'body'）。查找（'datacar]'）；
var page2=$（'myCar'）。查找（'datacar]'）；
var page3=$（document.getElementById（“[data car]”）；
var page4=$（“#body”）.find（“.bottom”）.data（'car'）；
var page5=$（'body'）。查找（'.bottom'）。数据（'car'）；
var page6=$（'body'）。查找（'datacar]'）；
var page7=$（'body'）。查找（'myCar'）。数据（'data-car'）；
console.log（第0页）；//不工作->未定义
console.log（page1）；//不工作->对象{0:，长度：1，prevObject:Object}
console.log（第2页）；//不工作->对象{length:0，prevObject:Object}
console.log（第3页）；//不工作->对象{}
console.log（第4页）；//不工作->未定义
console.log（第5页）；//不工作->未定义
console.log（第6页）；//不工作->对象{0:，长度：1，prevObject:Object}
console.log（第7页）；//不工作->未定义
});
});

从代码段注释中查看为什么它不起作用

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

});

$（文档）.ready（函数（）{
//数据[0]=“特斯拉X”
$（“正文”）。附加（“”）；
$（文档）。在（'click'，'#save'，函数（e）{
e、 预防默认值（）；
var page0=$（this）.data（'car'）；//其目标属性无效单击的元素不是数据car元素
var page1=$（'body'）。查找（'[data car]'）；//有效的一个。只能获取元素对象
var page2=$（'myCar'）.find（'datacar]'）；//起始处缺少一个无效的id`#`
var page3=$（document.getElementById（'[data car]'）；//jquery对象无效。您混淆了jquery对象和js
var page4=$（'#body'）.find（'.bottom'）.data（'car'）；//body其标记不是id名称
var page5=$（'body'）.find（'.bottom'）.data（'car'）；//bottom类不在html中
var page6=$（'body'）.find（'datacar]'）；//与page2相同
var page7=$（'body'）.find（'#myCar'）.data（'data-car'）；//您已经在调用data（）函数。因此它的get属性值无效。它的搜索类似于'data-car'`
var page8=$（'body'）。查找（'datacar]'）。数据（'car'）//正确一个
console.log（第0页）；//不工作->未定义
console.log（page1）；//不工作->对象{0:，长度：1，prevObject:Object}
console.log（第2页）；//不工作->对象{length:0，prevObject:Object}
console.log（第3页）；//不工作->对象{}
console.log（第4页）；//不工作->未定义
console.log（第5页）；//不工作->未定义
console.log（第6页）；//不工作->对象{0:，长度：1，prevObject:Object}
console.log（第7页）；//不工作->未定义
});
});

尝试使用：

$(document).ready(function(){

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

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


});

$（文档）.ready（函数（）{
var data=“特斯拉X”
$（“正文”）。附加（“”）；
var page0=$（文档）.find（“#myCar”）；
控制台日志（第0页）；
});

要检索元素：

var elem = $('#myCar')

要检索其属性，请执行以下操作：

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

最后：

var value = $('#myCar').attr("data-car") //Value == Tesla X

---

您是否尝试过简单的

$（'myCar'）.data（'car'）

/$（'myCar'）.attr（'data-car'）？和

$（'body'）。find（'datacar'））

会给你结果，所以请尝试

$（'body'）。find（'datacar'））。data（'car'）

不应该

$（'myCar'）

是

$（'myCar'）

？请将相关标记也放在您的代码片段中，以便我们可以复制该问题。感谢您对每个变量的额外解释。这对我很有帮助。干杯