我通过.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
});
});
从片段注释中查看为什么它不起作用
$(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
});
});
尝试使用:
$(document).ready(function(){
var data = "Tesla X"
$("body").append('<div id="myCar" data-car="' + data + '"></div>');
var page0 = $(document).find('#myCar');
console.log(page0);
});
检索元素:
var elem = $('#myCar')
要检索其属性:
$('#myCar').attr("data-car")
最后:
var value = $('#myCar').attr("data-car") //Value == Tesla X