Javascript 如何将JS呈现给使用JS生成的内容？_Javascript_Jquery_Jquery Ui

Javascript 如何将JS呈现给使用JS生成的内容？

javascript jquery jquery-ui

Javascript 如何将JS呈现给使用JS生成的内容？,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,可能重复：我有一个问题，当用Java脚本生成内容时，嵌入式脚本不起作用。如何正确地编写代码以下是一个工作示例：类datepicker可以正确地用于静态html代码，但不适用于在运行时使用“添加新行”按钮添加的行。请注意，重新加载页面对我来说不是一个选项，因为真正的问题更复杂谢谢你的帮助 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <

可能重复：

我有一个问题，当用Java脚本生成内容时，嵌入式脚本不起作用。如何正确地编写代码

以下是一个工作示例：类datepicker可以正确地用于静态html代码，但不适用于在运行时使用“添加新行”按钮添加的行。请注意，重新加载页面对我来说不是一个选项，因为真正的问题更复杂

谢谢你的帮助

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( ".datepicker" ).datepicker({
        yearRange: "-100:+0",
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd'
        });
    });
    </script>
</head>
<body>

<p>How many children do you have? What is their names and age?</p>
 <input type="text" id="qchildren" />
 <div id="qchildren-answer-wrapper"></div>


<button type="button" onclick="addNew()">Add new entry</button>
<button type="button" onclick="save()">Save</button>

 <br/>This is a correct date picker:
 <input type="text" class="datepicker" id="dp1" />

<script>
var lines=0;
function addNew()
{
lines++;
var newElement = document.createElement("span");
  newElement.innerHTML =  'Name:<input type="text" id="qchildrenname'+window.lines+'" /> Birth date:<input type="text" class="datepicker" id="qchildrenage'+window.lines+'" /><br/>';
document.getElementById("qchildren-answer-wrapper").appendChild(newElement);
}

function save()
{
var answer='';
for (var ii=1;ii<=window.lines;ii++)
{
if (document.getElementById('qchildrenname'+ii.toString()).value.toString()!=''){
answer+=document.getElementById('qchildrenname'+ii.toString()).value.toString()+','+document.getElementById('qchildrenage'+ii.toString()).value.toString()+';';
}
}
document.getElementById("qchildren").value=answer;
}
</script>


</body>
</html>


$（函数（）{
$（“.datepicker”）.datepicker({
年份范围：“-100:+0”，
变化月：对，
变化年：是的，
日期格式：“yy-mm-dd”
});
});
你有几个孩子？他们的名字和年龄是多少
添加新条目
拯救

这是一个正确的日期选择器：
var线=0；
函数addNew（）
{
行++；
var newElement=document.createElement（“span”）；
newElement.innerHTML='Name:出生日期：
'；
document.getElementById（“qchildren答案包装”）.appendChild（newElement）；
}
函数save（）
{
var-answer=''；
对于（var ii=1；ii第一个将日期选择器与html输入关联的抽象函数：
<script>
function attachDatePickerById(id) {
    $( "#" + id ).datepicker({
    yearRange: "-100:+0",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy-mm-dd'
    });
}

// Attaching your initial datepicker with id "dp1"
$(attachDatePickerById("dp1"));
</script>


函数attachDatePickerById（id）{
$（“#”+id）.日期选择器({
年份范围：“-100:+0”，
变化月：对，
变化年：是的，
日期格式：“yy-mm-dd”
});
}
//附加id为“dp1”的初始日期选择器
$（attachDatePickerById（“dp1”）；

然后，只需在每个新的日期选择器连接后调用此函数：
function addNew()
{
    lines++;
    var newElement = document.createElement("span");
    newElement.innerHTML =  'Name:<input type="text" id="qchildrenname'+window.lines+'" /> Birth date:<input type="text" class="datepicker" id="qchildrenage'+window.lines+'" /><br/>';
    document.getElementById("qchildren-answer-wrapper").appendChild(newElement);

    // Tie jquery datepicker control to new added html INPUT
    attachDatePickerById("qchildrenage" + window.lines);
}

函数addNew（）
{
行++；
var newElement=document.createElement（“span”）；
newElement.innerHTML='Name:出生日期：
'；
document.getElementById（“qchildren答案包装”）.appendChild（newElement）；
//将jquery datepicker控件绑定到新添加的html输入
attachDatePickerById（“qchildrenage”+window.line）；
}