Une question?: Pourquoi l'élément p ne peut-il être inséré qu'une seule fois et ne peut ensuite pas être réinséré??
Modification?:
Je publierai le code
C'est du HTML
<p class="remark">
<p class="remark-input">
<span class="input-avatar">BOSS</span>
<textarea class="input-write"></textarea>
<p class="input-preserve">
<button class="input-submit">蓋樓</button>
</p>
</p>
<p class="remark-output">
<p class="output-avatar"></p>
<p class="output-info">
<span class="output-name">lily: </span>
<span class="output-message">haha</span>
</p>
<p class="output-time">今天 04:32:56<span>回復(fù)|贊</span></p>
</p>
<p class="remark-output">
<p class="output-avatar"></p>
<p class="output-info">
<span class="output-name">lucy: </span>
<span class="output-message">haha</span>
</p>
<p class="output-time">今天 04:32:57<span>回復(fù)|贊</span></p>
</p>
</p>
C'est js
var oRemark=document.querySelector('.remark');
var oSubmit=document.querySelector('.remark .input-submit');
var oWrite=document.querySelector('.remark .input-write');
var arr=[];
oSubmit.onclick=function(){
var value=oWrite.value;
var time=new Date().toLocaleString();
var ele='<p class="remark-output">'+
'<p class="output-avatar"></p>'+
'<p class="output-info">'+
'<span class="output-name">BOSS: </span>'+
'<span class="output-message">'+value+'</span>'+
'</p>'+
'<p class="output-time">'+time+'<span>回復(fù)|贊</span></p>'+
'</p>';
oRemark.innerHTML+=ele;
console.log(1);
}
Je ne peux mettre à jour mon commentaire qu’une seule fois, et puis ?a s’arrête, je ne sais pas pourquoi ?
Merci?: je ne savais pas que innerHTML était si magique, alors pourquoi s'embêter??
Merci encore !
Le code s'exécute sans problème. Il est recommandé de vérifier le code et de le déboguer
Résultats des courses?:
Réponse supplémentaire à la question après avoir publié le code?:
Observez votre propre code. Vous utilisez oRemark.innerHTML Il n'y a aucun problème à l'exécuter lorsque vous cliquez dessus pour la première fois. Parce que le dom existe, vous pouvez exécuter cette méthode. , puis vous pouvez l'exécuter à nouveau. En apparence, le dom ajoute uniquement "insérer du texte". Parce que innerHTML est utilisé, cela équivaut à supprimer le <button class="input-submit">building</. bouton> puis dans Ajouté à la page, donc l'événement onclick précédent est perdu.
L'image ci-dessous est une solution modifiable : vous pouvez également utiliser la délégation d'événement pour la compléter
box doit être une bo?te contenant p. Votre bo?te a une valeur fixe et vous devez la mettre à jour à chaque fois
Parce que vous modifiez le contenu à l'intérieur <p class="remark">
里面的內(nèi)容的時(shí)候新添加的按鈕沒有添加過點(diǎn)擊事件的。就是這個(gè)時(shí)候添加點(diǎn)擊事件的代碼沒有再次執(zhí)行給你添加事件,你需要把添加事件的代碼放到單獨(dú)一個(gè)函數(shù)里,但頁面加載的時(shí)候調(diào)用一遍。然后在替換<p class="remark">
et que vous l'appelez à nouveau, afin que l'événement de clic puisse prendre effet pour tous les boutons nouvellement ajoutés.
Après tout, il s'agit toujours du principe de fonctionnement de js et dom dans le navigateur. Vous pouvez essayer de le réécrire selon ce que j'ai dit.
Je pense que le premier bouton de votre code peut être ajouté normalement, mais les autres boutons nouvellement ajoutés ne fonctionneront pas. Essayez-le.
https://jsfiddle.net/8ghrx7os/
Il devrait pouvoir être inséré plusieurs fois. Veuillez poster le code dans son intégralité et jeter un ?il
.--------------------Ligne de séparation----------------------------------
Parce que < button class="input-submit">Building</button>
Ce bouton est un n?ud enfant de <p class="remark">
. <button class="input-submit">蓋樓</button>
這個(gè)按鈕在 <p class="remark">
的子節(jié)點(diǎn)。
點(diǎn)擊按鈕時(shí)更新 <p class="remark">
的 同時(shí),刷新了 button
,導(dǎo)致監(jiān)聽失效。
可以重新賦值解決,或者直接把 button
Lorsque vous cliquez sur le bouton, <p class="remark">
est mis à jour. En même temps, le bouton
est actualisé, provoquant l'échec de la surveillance.
bouton
à l'extérieur. var oSubmit=document.querySelector('.remark .input-submit');
var oWrite=document.querySelector('.remark .input-write');
var arr=[];
var add = function() {
var value=oWrite.value;
var time=new Date().toLocaleString();
var ele='<p class="remark-output">'+
'<p class="output-avatar"></p>'+
'<p class="output-info">'+
'<span class="output-name">BOSS: </span>'+
'<span class="output-message">'+value+'</span>'+
'</p>'+
'<p class="output-time">'+time+'<span>回復(fù)|贊</span></p>'+
'</p>';
oRemark.innerHTML+=ele;
console.log(1);
/* 重新賦值 */
var oSubmit=document.querySelector('.remark .input-submit');
oSubmit.onclick=add;
}
oSubmit.onclick=add;
Vous pouvez essayer d'utiliser jquery.
//html
<p class="box"></p>
<button class="btn">add</button>
//js
$(".btn").on("click", function() {
var p = "<p>插入的文字</p>";
$(".box").append(p);
});