[英]how to add div section using button click and display it on the view
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>
我是Rails的新手，我尝试在click上添加div部分并在view.show中显示。我尝试使用此代码，但仍然无法正常工作，并且控制台中的错误是cannot read property clone node of null 。 我尝试了多种方法使它正常工作，但仍然失败了。 这是下面的HTML文件，JS文件和CSS文件，错误为cloneNode undefined 。 CSS和HTML文件正在运行，但JQuery无法运行
现在设置的方式是执行重复功能，而不是将其附加到事件处理程序，以便稍后当有人单击btn div时它可以为您执行。
所以改变这个
document.getElementById('btn').onclick = duplicate();
进入
document.getElementById('btn').onclick = duplicate;
您还为输入附加了相同的事件，因此我建议删除其中之一。
您的另一个问题是上述答案指出您要将克隆附加到无效元素。
如果要将其附加到middle-section则将其更改为：
original.appendChild(clone);
或者，如果要将其附加到body ，请将其更改为：
document.body.appendChild(clone);
更改此：
original.body.appendChild(clone);
对此：
original.appendChild(clone);
并且：
document.getElementById('btn').onclick = duplicate();
对此：
document.getElementById('btn').addEventListener('click', function() {
duplicate();
});
这是Codepen的示例 。
jQuery不支持中间rails标签。 因此无法克隆或附加div节。 标准方法是使用Rails嵌套属性的概念来实现此任务的Rails Cocoon gem支持
如何使用jQuery Bootstrap在按钮单击上显示特定的div
[英]how to display specific div on button click using jquery bootstrap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.