Невозможно получить доступ к div, который создан ajax (является динамическим)

Question

Я занимаюсь разработкой приложения с использованием Electron и хочу создавать разные страницы.Я создал index.html и еще один: seed.html.(Я буду добавлять больше, и это только для теста) Что я делаю, чтобы загрузить содержимое выбранной страницы (например, addseed.html) через jQuery .load() внутри div с классом "main" в index.html,Теперь проблема в том, что после загрузки addseed в таблице не отображаются более старые запросы.Я проверил, и он может правильно прочитать файл, но основная проблема заключается в добавлении их в динамически созданную таблицу.Однако после добавления нового элемента он отображается правильно, но старые элементы этого не делают.

(вместо "семени" есть "контакт", потому что я прохожу учебник, а кодпросто для теста: D)

function addEntry(seed, price, image) {
    if(seed && price && image) {
        sno++
        let updateString = '<tr> <td>' + sno + '</td> <td>'+ seed +'</td> <td>' + price +'</td> <td> <img  width="200px" height="200px" src="' + image + '"> </td> </tr>' 
        $('#contact-table').append(updateString)
    }
}
function loadAndDisplayContacts() {  
   $("#status").text("function works\n")
   //Check if file exists
   if(fs.existsSync('contacts.txt')) {
       let data = fs.readFileSync('contacts.txt', 'utf8').split('\n')

       data.forEach((contact, index) => {
           let [ seed, price, image ] = contact.split(',')
          addEntry(seed, price, image)
       })
   } else {
       console.log("File Doesn\'t Exist. Creating new file.")
       fs.writeFile('contacts.txt', '', (err) => {
           if(err)
               console.log(err)
       })
   }
}

$(document).on('click', '#addseed', () => {      
    $(".main").load("addseed.html")
    loadAndDisplayContacts()
})

и это HTML-код для 'addseed.html':

<div class="container main">
<div class="form-group">
    <label for="Seed">Seed</label>
    <input type="text" Seed="Seed" value="" id="Seed" placeholder="Seed" class="form-control" required>
</div>

<div class="form-group">
    <label for="Price">Price</label>
    <input type="Price" Seed="Price" value="" id="Price" 
       placeholder="Price" class="form-control" required>
</div>

<div class="form-group">
    <label for="Image">Image</label>
    <input type="Image" Seed="Image" value="" id="Image" 
       placeholder="Image" class="form-control" required>
</div>

<button id="openFile" onclick="openFile();">Open</button>

<p>this is filepath: <span id="filee"></span></p>

<div class="form-group">
    <button class="btn btn-primary" id="add">Add to list!</button>
</div>

<div id="contact-list">
    <table class="table-striped" id="contact-table">
        <tr>
            <th class="col-xs-2">S. No.</th>
            <th class="col-xs-4">Seed</th>
            <th class="col-xs-6">Price</th>
            <th class="col-xs-8">Image</th>
        </tr>
    </table>
</div>
</div>

и в index.html У меня есть:

    <button id="addseed">Add</button>
    <div class="main"></div> <!--the content should be added here as a child of main-->
    <p id="status"></p>

Answer 1

Вы не ждете завершения асинхронного AJAX. Вам необходимо вызвать функцию, которая зависит от обновленного DOM, в качестве функции обратного вызова.

$(document).on('click', '#addseed', () => {      
    $(".main").load("addseed.html", loadAndDisplayContacts)
})

А в addseed.html измените class="container main" на class="container". Вы загружаете файл в main DIV в index.html, он не заменяет DIV. Итак, вы создаете два DIV с этим классом, и следующий щелчок загружает файл в оба из них.