我正在尝试访问要在其上附加button的div(或此处的tr标签)。但是我无法访问tr标记,因为它会在一段时间后加载,并且那时还没有出现在DOM中,并且出现错误。
在DOM上加载内容后如何访问标签
agent2
答案 0 :(得分:1)
我认为您的document.getElementById代码仅应在加载所有内容后执行。您可以添加“加载” Eventlistener,然后将代码放入其中。
window.addEventListener("load", function(){
var btn = document.getElementById('btnn');
var tab = document.getElementsByClassName("scope")[0];
tab.append(btn)
});
顺便说一句:我总是对包含使用“ defer”,如下所示:
<script src="{{ asset('/general/js/local.js') }}" defer></script>
这可确保仅在所有包含项均已加载后才触发“加载”事件。
答案 1 :(得分:1)
您可以使用import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View,TextInput, TouchableOpacity, Text,} from 'react-native';
// import all basic components
import Share from 'react-native-share'
import QRCode from 'react-native-qrcode-svg';
//import QRCode
class App extends Component {
svg;
constructor() {
super();
this.state = {
inputValue: '',
inputValue2: '',
// Default Value of the TextInput
valueForQRCode: '',
// Default value for the QR Code
};
}
getTextInputValue = () => {
// Function to get the value from input
// and Setting the value to the QRCode
this.setState({ valueForQRCode: this.state.inputValue + this.state.inputValue2 });
};
shareQR =() =>{
this.svg.toDataURL((data) => {
const shareImageBase64 = {
title: "QR",
message: "Ehi, this is my QR code",
type: 'image/png',
url: `data:image/png;base64,${data}`
};
Share.open(shareImageBase64);
});
}
render() {
return (
<View style={styles.MainContainer}>
{/* <QRCode
value={"Abhigyan" + this.state.valueForQRCode}
size={250}
bgColor="#000"
fgColor="#fff"
getRef={(ref) => (this.svg = ref)}
onPress={() =>{shareQR()}}
/> */}
<TouchableOpacity onPress={this.shareQR}>
<QRCode
value={"," + this.state.valueForQRCode}
size={250}
fgcolor="#fff"
bgColor="#000"
getRef={(ref) => (this.svg = ref)}
/>
</TouchableOpacity>
<TextInput
// Input to get the value to set on QRCode
style={styles.TextInputStyle}
onChangeText={text => this.setState({ inputValue: text })}
underlineColorAndroid="transparent"
placeholder="Enter text to Generate QR Code"
/>
<TextInput
// Input to get the value to set on QRCode
style={styles.TextInputStyle}
onChangeText={text => this.setState({ inputValue2: text })}
underlineColorAndroid="transparent"
placeholder="Enter text to Generate QR Code"
/>
<TouchableOpacity
onPress={this.getTextInputValue}
activeOpacity={0.7}
style={styles.button}>
<Text style={styles.TextStyle}> Generate QR Code </Text>
</TouchableOpacity>
</View>
);
}
}
export default App;
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 10,
alignItems: 'center',
paddingTop: 40,
},
TextInputStyle: {
width: '100%',
height: 40,
marginTop: 20,
borderWidth: 1,
textAlign: 'center',
},
button: {
width: '100%',
paddingTop: 8,
marginTop: 10,
paddingBottom: 8,
backgroundColor: '#F44336',
marginBottom: 20,
},
TextStyle: {
color: '#fff',
textAlign: 'center',
fontSize: 18,
},
});
API来观看DOM。如果添加了要观察的元素,则可以应用其他代码(例如,添加按钮)。
基本示例:
table.on('click', '.edit-text', function() {
// yadda yadda;
}
答案 2 :(得分:0)
此DIV是否在AJAX调用的响应中创建。如果是这种情况,那么一旦收到AJAX调用的响应,就需要调用按钮附加逻辑。
或使用此:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// - Code to execute when all DOM content is loaded.
// - including fonts, images, etc.
});
</script>