Question

我正在使用Electron开发应用程序，并且我想制作不同的页面。我创建了一个index.html，另一个创建了：seed.html。（我将添加更多内容，这个仅用于测试）我要做的是通过jQuery .load()在div中使用index.html中的“ main”类加载选定页面（例如addseed.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()
})

，这是'addseed.html'的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中的index.html DIV中，它不会替代DIV。因此，您将使用该类创建两个DIV，然后单击将文件加载到两个类中。

无法访问由ajax创建的div（是动态的）

1 个答案: