我正在尝试创建一个按钮,每次按下该按钮时都会生成已格式化的 div。
div 由表单组成,它们的字段应该已经填充了存储在 javascript 变量中的数据。
例如。
<div id="myDiv_#">
<form id="myForm">
<input type="text" id="start_date" name="start_date" value="someJavascriptVariable" />
<input type="text" id="end_date" name="end_date" value="someJavascriptVariable" />
<select name="type" id="type">
<option value="1">"someJavascriptVariable"</option>
<option value="2">"someJavascriptVariable"</option>
</select>
<input type="button" id="new_button" value="Show">
</form>
</div>
<script>
$('#button_push').click(function()
{
//creating myDiv_#
}
</script>
我在网上搜索,但从未找到好的结果:s 我请你帮忙解决这个问题,也许是一个指导方针或一个起点。 重点是,每次用户按下按钮时,都会使用上面的参数创建一个新的 div。
干杯
最佳答案
对于如此复杂的标记,如果有一个可以克隆、修改属性然后根据需要附加到页面的隐藏版本,可能会更容易。
类似这样的事情:
<div id="container"></div>
<div style="display: none;">
<div id="myDiv_#">
<form id="myForm">
<input type="text" id="start_date" name="start_date" value="someJavascriptVariable" />
<input type="text" id="end_date" name="end_date" value="someJavascriptVariable" />
<select name="type" id="type">
<option value="1">"someJavascriptVariable"</option>
<option value="2">"someJavascriptVariable"</option>
</select>
<input type="button" id="new_button" value="Show">
</form>
</div>
</div>
$('#button_push').click(function() {
var $div = $("#myDiv_\\#").clone(true); // keep events'
$div.attr('id', '').addClass('clone'); // example of amending attributes
$("#container").append($div); // append
});
您也可以轻松地将 someJavascriptVariable
字符串替换为与该克隆实例相关的特定变量。
关于javascript - 使用jquery创建动态div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13584705/