英文:
How to make a div inside an append() work?
问题
我尝试让带有id为black的div回显我的JSON数据，但它不起作用。
到目前为止，我已经做了这个，但它可能错过了时机，或者逻辑不正确。
我已经检查了JSON，它的格式是正确的。
英文:
I'm trying to get the div with the id black to echo out my JSON data, but it won't work.
So far I've done this, but it misses the timing or perhaps the logic is not right.
I have checked the JSON and it's correctly formatted.
<script>
countPos = 0;
//get JSON from school.php
$(document).ready(function(){
$.getJSON('school.php', function(data) {
window.console && console.log(data);
window.console && console.log('Document ready called');
//if button with id addPos clicked, bring up function
$('#addPos').click(function(event){
event.preventDefault();
if ( countPos >= 9 ) {
alert("Maximum of nine position entries exceeded");
return;
}
countPos++;
window.console && console.log("Adding position "+countPos);
$('#position_fields').append(
'<div id="position'+countPos+'"><br><br >\
<label for="year">Year:</label> <input type="text" size="80" name="year'+countPos+'" value="" /> \
<input type="button" value="-" onclick="$(\'#position'+countPos+'\').remove();return false;"></p> \
<label for="edu_school">School:</label> <input type="text" size="80" name="edu_school'+countPos+'" id="Autoschool'+countPos+'" value="" /><br>\
<label for="position">Position:</label> <input type="text" size="80" name="posiition'+countPos+'" value="" /><br>\
</div>\
<div id = "black"></div>')})
$ ('#black').html(data);
});
});
});
</script>
答案1
得分: 0
你的代码没有意义。school.php 返回什么？你根本没有在哪里使用它？addpos click 事件应该在 getJSON 外面。每次点击时你都添加了<div id = "black"></div>，这已经是错误的。你也可以这样做<input type="button" value="-" onclick="this.closest('div').remove()" />，不需要返回 false，因为它是一个按钮。
请尝试这个。你的脚本有很多问题，我刚刚重写了它。
假设 school.php 只返回一个数据集。
我将一些 ID 更改为类名，并删除了其他一些。数据所在的 div 对我来说仍然是个谜。在这里，我为每个职位重复它，但你可能只想要它出现一次？
$(() => {
let schoolData;
$.getJSON('school.php', (data) => {
schoolData = data;
})
$('#addPos').on('click', (event) => {
event.preventDefault();
const countPos = $('#position_fields').find('.position').length;
if (countPos >= 9) {
alert("Maximum of nine position entries exceeded");
return;
}
$('#position_fields').append(`
<div class="position">
<label>Year: <input type="text" size="80" name="year${countPos}" value="" /></label>
<input type="button" value="-" onclick="this.closest('div').remove()" />
<label>School: <input type="text" size="80" name="edu_school${countPos}" value="" /></label><br>
<label>Position: <input type="text" size="80" name="position${countPos}" value="" /></label>
<div class="black">${schoolData}</div>
</div>`);
});
});
希望这对你有帮助。如果有其他问题，请随时提出。
英文:
Your code makes no sense. What does school.php return? Where do you use it at all? The addpos click belongs outside the getJSON. You add <div id = "black"></div> each time you click so that is already wrong. You can also do <input type="button" value="-" onclick="this.closest('div').remove()" /> without the need to return false since it is a button
Please try this. Your script has so many issues I just rewrote it
Assuming school.php returns only one set of data ever
I changed some IDs to class and removed others.
The div with the data is still a mystery to me. Here I repeat it for every position, but likely you want it only once?
<!-- language: lang-js -->
$(() => {
let schoolData;
$.getJSON('school.php', (data) => {
schoolData = data;
})
$('#addPos').on('click', (event) => {
event.preventDefault();
const countPos = $('#position_fields').find('.position').length;
if (countPos >= 9) {
alert("Maximum of nine position entries exceeded");
return;
}
$('#position_fields').append(`
<div class="position">
<label>Year: <input type="text" size="80" name="year${countPos}" value="" /></label>
<input type="button" value="-" onclick="this.closest('div').remove()" />
<label>School: <input type="text" size="80" name="edu_school${countPos} value="" /></label><br>
<label>Position: <input type="text" size="80" name="posiition'+countPos+'" value="" /></label>
<div class="black">${schoolData}</div>
</div>`);
});
});
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论