comment ajouter section div à l'aide cliquez sur le bouton et l'afficher sur la vue

js file 
 

 
    var i = 0; 
 
     var original = document.getElementById('middle-section'); 
 
     document.getElementById('btn').onclick = duplicate(); 
 
     function duplicate() { 
 
      var clone = original.cloneNode(true); // "deep" clone 
 
      clone.id = "middle-section" + ++i; 
 
      // or clone.id = ""; if the divs don't need an ID 
 
      original.body.appendChild(clone); 
 
     }

css file 
 

 
.middle-section-name{ 
 
     position: absolute; 
 
     left: 500px; 
 
     top: 850px; 
 
     width: 200px; 
 
     height: 40px; 
 
     background-color: #aaaaaa; 
 
     border: 2px hidden; 
 
    } 
 

 
    .middle-section-edit{ 
 
     position: absolute; 
 
     left: 700px; 
 
     top: 840px; 
 
    } 
 

 
    .middle-section-edit img{ 
 
    width: 20px; 
 
    margin: 5px; 
 

 
    }

view 
 

 
<body> 
 
<div class="container-fluid"> 
 
    <div class="header"> 
 
    <p>header</p> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 

 
    <div class="logo"> 
 
    <div class="logo-part"> 
 
     <p>logo</p> 
 
    </div> 
 
    <div class="logo-name"> 
 
     <P>logo name</P> 
 
    </div> 
 
    <div class="logo-edit"> 
 
     <%= image_tag 'edit-logo.png'%> 
 
    </div> 
 
    </div> 
 

 
    <div class="top-main-section"> 
 
    <div class="top-main-section-area"> 
 
     <p>top main section</p> 
 
    </div> 
 
    <div class="top-main-section-edit"> 
 
     <%= image_tag 'settings-logo.png'%> 
 
    </div> 
 
    </div> 
 

 
    <div class="top-banner-section"> 
 
    <div class="top-banner-section-area"> 
 
     <p>top banner section</p> 
 
    </div> 
 
    <div class="top-banner-section-edit"> 
 
     <%= image_tag 'settings-logo.png'%> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="middle-section" id="middle-section"> 
 
    <div class="middle-section-name"> 
 

 
    </div> 
 

 
    <div class="middle-section-edit"> 
 
     <%= image_tag 'settings-logo.png'%> 
 
    </div> 
 

 
    <div class="middle-section-area"> 
 
     <p>carosel</p> 
 

 

 
    </div> 
 

 

 
    </div> 
 

 

 
</div> 
 

 
<input type="button" value="click" id="btn" onclick="duplicate()"/> 
 
</body>

Je suis nouveau sur les rails et j'ai essayé d'ajouter la section div Cliquez et spectacle view.I essayer avec cette code mais ne fonctionne toujours pas et l'erreur dans la console est cannot read property clone node of null. J'ai essayé de différentes façons de le faire fonctionner mais j'ai quand même échoué. Voici le fichier HTML, le fichier JS et le fichier CSS ci-dessous avec une erreur de cloneNode undefined. Les fichiers CSS et HTML fonctionnent mais JQuery ne fonctionne pas

Source

2017-10-19 Thilanka Umayanga Jayarathna

jquery ne prend pas en charge les étiquettes de rails intermédiaires. donc ne peut pas cloner ou ajouter des sections div. la façon standard est l'utilisation des rails concept d'attributs imbriqués rails cocoon gem support to this task

Source

2017-10-30 05:11:53

La façon dont vous l'avez installé est maintenant que vous exécutez votre fonction dupliquée au lieu de l'attacher au gestionnaire d'événements pour qu'il puisse l'exécuter plus tard lorsque quelqu'un clique sur le btn div.

changer donc ce

document.getElementById('btn').onclick = duplicate();

Dans

document.getElementById('btn').onclick = duplicate;

Vous avez également le même événement attaché à votre entrée, donc je vous recommande de retirer l'un d'eux.

Votre autre problème est que la réponse ci-dessus a indiqué que vous ajoutez votre clone à un élément non valide.

Si vous voulez ajouter à middle-section changer ensuite à:

original.appendChild(clone);

Ou si vous voulez ajouter à la body, changer à:

document.body.appendChild(clone);

Source

2017-10-19 09:12:35 linasmnew

Ce n'est pas un travail pour moi. encore le même problème ici 'ne peut pas lire la propriété cloneNode est indéfini' –

Change ceci:

à ceci:

original.appendChild(clone);

Et aussi:

document.getElementById('btn').onclick = duplicate();

à ceci:

document.getElementById('btn').addEventListener('click', function() { 
    duplicate(); 
});

est ici un Codepen example.

Source

2017-10-19 09:18:18 delinear

même numéro. Ça ne marche pas –

Vérifiez l'exemple de codepen que j'ai posté - ça marche pour moi, ça marche pour vous? – delinear

il imprime 'carosel' trois fois dans l'exemple de codepen. mais ma console donne ne peut pas lire la propriété EventListner null et même problème. Je veux répéter cette section div encore avec les couleurs et l'image –

comment ajouter section div à l'aide cliquez sur le bouton et l'afficher sur la vue

Répondre

Questions connexes