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中选择“my_date”？我写了这个，但它不起作用：

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

感谢您的帮助，

Answer 1

我猜你是否已将这些标记放在脚本标记之间，因为您将其用作模板。
应用jquery-ui datepicker适用于实际的dom元素因此，您需要先应用模板并生成＆＃34; real＆＃34;元素，然后应用datepicker。

编辑：并观察ID会发生什么，当您生成多个表单时，您不应多次使用相同的ID。如果它在＆＃34; my_date_1＆＃34;，＆＃34; my_date_2＆＃34;等内容中进行了转换，那么您最好使用专用类来识别日期选择器输入而不是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();

...或者您可能必须先插入它，然后调用datepicker扩展名。

JQuery选择<script> </script>元素

2 个答案: