div加载dom后在div上添加按钮

时间:2019-02-14 09:24:02

标签: javascript jquery dom

我正在尝试访问要在其上附加button的div(或此处的tr标签)。但是我无法访问tr标记,因为它会在一段时间后加载,并且那时还没有出现在DOM中,并且出现错误。

在DOM上加载内容后如何访问标签

agent2

3 个答案:

答案 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>