JQuery select 在 <script></script> 元素上

Question

我在 html.twig 页面中使用了以下脚本：

<script type="text/javascript" src="{{asset('/jquery-ui-1.11.2/external/jquery/jquery.js')}}"></script>
<script type="text/javascript" src="{{asset('/jquery-ui-1.11.2/jquery-ui.min.js')}}"></script>
<script type="text/javascript" src="{{asset('/js/jeoquery.js')}}"></script>

<script type="text/html" id="my_prototype"> 
 <div class="form-horizontal">
            <div class="form-group">
                           // my first textarea
            </div>
            <div class="form-group">
                           // my second textarea     
            </div>
            <div class="form-group">
                           // my first input
                   <label for="my_date">Date</label>
                   <input type="text" id="my_date" name="my_datename" maxlength="10" class="form-control" />
            </div>    
</div>
</script>

我的问题是：如何在 jquery 中 select "my_date" ？我写了这个，但它不起作用：

$('#my_date').datepicker();

感谢您的帮助，

Answer 1

我猜您将这些标签放在脚本标签之间是因为您将其用作模板。
应用 jquery-ui 日期选择器适用于实际的 dom 元素。
因此，您需要先应用模板并生成 "real" 元素，然后应用日期选择器。

编辑：观察 id 会发生什么，当您生成多个表单时，您不应该多次使用相同的 id。如果它被转换成 "my_date_1"、"my_date_2" 之类的东西，也许你最好使用专用的 class 来识别日期选择器输入而不是 id。

Answer 2

你能用 jQuery 对象而不是原型做同样的事情吗？

例如：（我删除了 id 属性，这样你就可以拥有多个）

var $proto = $('<div class="form-horizontal">
    <div class="form-group">
        // my first textarea
    </div>
    <div class="form-group">
        // my second textarea     
    </div>
    <div class="form-group">
       // my first input
       <label>Date</label>
       <input type="text" class="date_field" name="my_datename" maxlength="10" class="form-control" />
    </div>    
</div>");

这为您提供了一个 DOM 结构，您可以在需要的地方插入。

此外，您还可以使用

$proto.find('.date_field').datepicker();

...或者您可能必须先插入它，然后再调用日期选择器扩展。

JQuery select 在 <script></script> 元素上

JQuery select on <script></script> elements

javascript

jquery

prototype