javascript - 协助将jquery捆绑到js变量中以进行条件输出

Question

我有一个应用程序，其中有一个在 html select (onchange) 上调用的 javascript 函数。根据选择的内容，它会将一些输出发送到 div；或者它会删除该 div 的输出。在 js 函数中，它将输出构建到 js 变量中。该变量就是输出的内容。这一直工作正常，我有一些条件输入将加载到表单上(表单的开头和结尾位于 div 之外)

所以我遇到问题的地方是我尝试放置一个具有“datepicker”类的输入。 jquery 不适用于该输入。如果我在 js 输出变量之外采用与该类完全相同的输入，它就可以正常工作。

这是我在 js 函数中构建 js 输出 var:

output253="This type of news item requires a start and end date...";
output253+="<br/><br/>";
output253+="<h3>Start Date</h3>";
output253+="<input type='date' name='start_date' />";

output253+="<h3>End Date</h3>";
output253+="<input type='date' name='end_date' />";

output253+="<br/><br/>";
output253+="<h3>Start99</h3>";

output253+="<input type='text' id='add-start-date' class='form-control datepicker' name='start99' />";

所以我确信这与我这样做的方式有关，并且由于我这样做的方式，事情没有得到正确的解释；所以我试图找出是否有一种方法可以将其包含在输出变量中，这样它将能够正确解释 jquery 并在该输出上加载日期选择器

谢谢!

<小时/>

根据请求添加完整代码

<小时/>

          <select class="form-control" onchange="getValue1()" id="select_id253" name="type_id" required>
            <option value="">Choose...</option>
            {% for type in news_types %}
            <option value="{{ type.id }}"{% if news.type_id == type.id %} selected{% endif %}>{{ type.name }}</option>
            {% endfor %}
          </select>
          <p></p>
        </div>
      </div>


<script>
function getValue1() {
d = document.getElementById("select_id253").value;

var output253="";

if (d==='4' || d==='6') {
output253="This type of news item requires a start and end date...";
output253+="<br/><br/>";
output253+="<h3>Start Date</h3>";
output253+="<input type='date' name='start_date' />";

output253+="<h3>End Date</h3>";
output253+="<input type='date' name='end_date' />";

output253+="<br/><br/>";
output253+="<h3>Start99</h3>";

output253+="<input type='text' id='add-start-date' class='form-control datepicker' name='start99' />";
}

else {
output253="";
 }

document.getElementById("gdemo253").innerHTML = output253;


}

</script>



 <div id="gdemo253" style="padding: 20px;"></div>
  <br />

Answer 1

当您最初运行 jQuery 来初始化 DatePicker 时，它仅适用于屏幕上已有的对象。您可能必须在添加到页面的每个新元素上启动 DatePicker。您可以使用函数来完成此操作...

var initDatePicker = function( ele ) {

    ele.DatePicker({...});

}

var output253 = "";
output253 += "...";

//add output253 to the DOM.
$('some-div').append( output253 );

//now init DatePicker on the new element
initDatePicker( $(output253).find('.datepicker') );

这个的一些变体应该可以工作。请注意，这未经测试，仅作为示例。或者，您可以查看此线程，因为它可能提供替代方法。

Making datepicker live - JQuery