jquery - 在通过 ajax 加载的输入字段上绑定 jquery 函数

Question

我正在使用 jquery ui datepicker。在测试页面上它工作正常。

<div><input type="text" name="basic_example_1" id="basic_example_1" value="" />                     </div>      

<script>
$('#basic_example_1').datetimepicker();
</script>

但是如果输入字段是通过 ajax 加载的，我应该如何放置脚本？我试过这个

$("#basic_example_1").live("click", function(){
  $(this).datetimepicker();
});

不工作。感谢任何提示。

Answer 1

在ajaxdatetimepicker() 的函数之后和输入附加之后调用...success

$.ajax({
  ....
  success:function(){ 
      //do ur stuff..  append your input which is already done i guess
      $('#appendedInputID').datetimepicker(); //id of appened input 
  }
});

Answer 2

试试这个：

$('#basic_example_1').click(function(){
    $('#basic_example_1').datepicker('show');
});

或者，如果您的输入字段将是动态的，请创建一个“日期”类并为每个需要日期选择器的输入字段分配此类并添加此脚本：

    $('.date').click(function(){
        $('.date').datepicker();
        $(this).datepicker('show');
});

Answer 3

$(document).on('click', '#basic_example_1', function(){
    ...etc...
});

这样，它将绑定到文档而不是#basic_example_1，因此任何通过 ajax 到达且符合条件的内容都将被拾取。

Answer 4

这是一个简单的示例，它没有通过 ajax 获取输入，而是正在dynamically创建它，并且由于对Qoop使用它的引用focus现在效果更好，当我尝试使用click它时会产生奇怪的结果。这应该可以帮助您：

jQuery：

$(document).on('focus', '#basic_example_1', function () {
    $(this).datepicker();
});

示例请访问：http: //jsfiddle.net/a3zWv/

Answer 5

Ajax调用后，在success函数中可以这样写：

 jQuery.ajax({
      url: //url
      type: //post/get
      ...
      ...
      success: function(..){
                //Display/load text field
                jQuery("#basic_example_1").datetimepicker();
               },
      failure: function(..){
                   //code for failure
                 }



 });

我想它有效。