国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - Ajouter des éléments dynamiques à la page
phpcn_u1582
phpcn_u1582 2017-05-19 10:14:20
0
5
567

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:&nbsp;</span>
            <span class="output-message">haha</span>
        </p>
        <p class="output-time">今天&nbsp;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:&nbsp;</span>
            <span class="output-message">haha</span>
        </p>
        <p class="output-time">今天&nbsp;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:&nbsp;</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 !

phpcn_u1582
phpcn_u1582

répondre à tous(5)
僅有的幸福


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)聽失效。

可以重新賦值解決,或者直接把 buttonLorsque 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.

Vous pouvez le résoudre en réaffectant la valeur, ou simplement en pla?ant le bouton à l'extérieur.

??Réaffecter?:??
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:&nbsp;</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);
    });
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal