在AJAX響應中的jQuery UI日期選取器

Question

我正在使用PHP腳本來生成一些包含javascript（來自jQuery UI的DatePicker）的HTML。

使用jQuery/AJAX從主頁面調用PHP腳本。我所有的HTML渲染的沒有問題，但我得到的是說，一個控制檯錯誤：

遺漏的類型錯誤：$（...）日期選擇器是不是一個函數

我清楚自己做錯事，但沒有太大的一位Javascript專家。代碼工作正常，如果我直接調用new-fields.php，但是當我通過jQuery獲取它時會中斷。感謝任何幫助！

main.html中：

<script type="text/javascript"> 
jQuery('input[name="location"]').click(function(){ 
    var data = {location : jQuery(this).val(), department : $('input[name="department"]:checked').val()}; 
    jQuery.ajax({ 
     url: "/new-fields.php", 
     type:'POST', 
     data: data, 
     dataType: 'text', 
     success: function(result){ 
      jQuery('#div-custom').html(result).show();     
      $("#div-custom").find("script").each(function() { 
       eval($(this).text()); 
      }); 
     } 
    }); 
}); 
</script> 

新fields.php：

$picker = '<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
       <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
       <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
       <script> 
        $(function() { 
        $("#datepicker1").datepicker({ 
         numberOfMonths: 3, 
         showButtonPanel: true 
        }); 
        }); 
        </script> 
       <script> 
        $(function() { 
        $("#datepicker2").datepicker({ 
         numberOfMonths: 3, 
         showButtonPanel: true 
        }); 
        }); 
        </script> 

        <p>Date: <input type="text" id="datepicker1"></p> 
        <p>Date: <input type="text" id="datepicker2"></p>'; 

    echo $picker; 

Answer 1

你，因爲你用你jQuery主文檔得到一個錯誤，我承擔不衝突的目的，在success處理程序使用jQuery和$，最後在ajax響應中再次使用$表示法。

我的方法是將javascript移出ajax響應。
將所有.js文件加載到您的主文檔中，從響應中取出所有<script>引用並丟失eval。

更改ajaxsuccess處理這樣

success: function(result){ 
     jQuery('#div-custom').html(result).show();     
     jQuery("#div-custom").find("#datepicker1,#datepicker2").datepicker({ 
        numberOfMonths: 3, 
        showButtonPanel: true 
     }); 
} 

和你php文件應該只是：

$picker = '<p>Date: <input type="text" id="datepicker1"></p> 
      <p>Date: <input type="text" id="datepicker2"></p>'; 

echo $picker;