Question

我有一个应用程序，我在html select（onchange）上调用了一个javascript函数。根据选择的内容，它会向div发送一些输出;或者它将输出擦除到该div。在js函数中，它将输出构建为js变量。并且该变量是输出的。这个工作正常，我有一些条件输入可以加载到表单上（表单的开头和结尾都在div之外）

所以，我遇到问题的地方是我尝试输入一个类别为＆＃34; datepicker＆＃34;在上面。 jquery没有处理该输入。如果我在js输出变量之外的那个类中使用完全相同的输入，它可以正常工作。

这是我在js functon中构建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并在该输出上加载datepicker

谢谢！

根据要求添加整个代码

          <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

Answer 2

这是我的切换：

    <select id="umtest1" name="umtest1"  onchange="showDiv(this)" >
    <option value=1 >1</option>
    <option value=2 >2</option>
    <option value=3 >3</option>
    <option value=4 >4</option>
    <option value=5 >5</option>
    <option value=6 >6</option>

    </select>
    <br/>
    <br/>

    <script>

    function showDiv(elem){
       if(elem.value == 4 || elem.value == 6) {
          document.getElementById('hidden_div').style.display = "block";

          }

          else {

    document.getElementById('hidden_div').style.display = "none";

    }



    }

    </script>

    <div style="display: none;"  id="hidden_div" >gerard rocks</div>

协助将jquery捆绑到js变量中以有条件地输出

2 个答案: