为什么我的 jQuery 内联代码阻止了 MVC3 DateTime 编辑器模板中的 jQuery 代码答案

【问题标题】：Why is my jQuery inline code is blocking jQuery code in MVC3 DateTime Editor Template为什么我的 jQuery 内联代码阻止了 MVC3 DateTime 编辑器模板中的 jQuery 代码
【发布时间】：2012-05-01 09:53:06
【问题描述】：

我在 Views/Shared/EditorTemplates 中有一个 DateTime.cshtml 模板，它使用 TimePicker Addon 来实现 jQuery DateTime 选择器。这一直运行良好，直到.....

我最近在我的 CheckOut 页面中添加了一些内联 jQuery 来处理从购物车中删除项目，这导致 jQuery DateTime 选择器在编辑日期/时间时不再出现。模板的 MVC 日期格式部分（见下文）仍在应用中，但关于内联 jQuery 的某些内容与模板 jQuery 不兼容。

如果我在我的 CheckOut 视图中注释掉内联 jQuery，当我单击编辑日期/时间字段时，DateTime 选择器就会出现。

谁能看到我的内联 jQuery 的哪一部分与模板 jQuery 发生冲突？

DateTime.cshtml 模板

    @model Nullable<System.DateTime> 

@if ( Model.HasValue ) { 
   @Html.TextBox( "" , String.Format( "{0:dd/MM/yy HH:mm tt}" , Model.Value ) , new { @class = "textbox" , @style = "width:200px;" } ) 
} 
else { 
   @Html.TextBox("", String.Format("{0:dd/MM/yy HH:mm tt}", DateTime.Now), new { @class = "textbox", @style = "width:200px;" }) 
} 

@{ 
string name = ViewData.TemplateInfo.HtmlFieldPrefix; 
string id = name.Replace( ".", "_" ); 
} 
<script type="text/javascript">
    $(document).ready(function () {
        $("#@id").datetimepicker
            ({
                dateFormat: 'dd/mm/yy',
                showStatus: true,
                showWeeks: true,
                highlightWeek: true,
                numberOfMonths: 1,
                showAnim: "scale",
                ampm: true,
                hour: 12,
                minute: 0,
                stepMinute: 5,
                hourMin: 6,
                hourMax: 16,
                showOptions: {
                    origin: ["top", "left"]
                }
            });
    }); 
</script>

结帐查看 jQuery

    <script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler
        $(".RemoveLink").click(function () {
            // Get the id from the link
            var recordToDelete = $(this).attr("data-id");
            if (recordToDelete != '') {
                // Perform the ajax post
                $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
                    function (data) {
                        // Successful requests get here
                        // Update the page elements
                        if (data.ItemCount == 0) {
                            $('#row-' + data.DeleteID).fadeOut('slow');
                        } else {
                            $('#item-count-' + data.DeleteID).text(data.ItemCount);
                        }
                        //Hide the 'Checkout' button if there is no items in the cart.
                        if (data.CartTotal == 0) {
                            $('#checkout-button').fadeOut('slow');
                        }
                        $('#cart-total').text(data.CartTotal);
                        $('#update-message').text(data.Message);
                        $('#cart-status').text('Cart (' + data.CartCount + ')');
                    });
            }
        });
    });
</script>

相关生成的 HTML

    <div class="editor-label">
        <label for="Order_PickUpDateTime">Pick up Date and Time</label>
    </div>
    <div class="editor-field">

<input class="textbox" data-val="true" data-val-required="Pick up date and time is required" id="Order_PickUpDateTime" name="Order.PickUpDateTime" style="width:200px;" type="text" value="30/04/12 16:38 PM" /> 
<script type="text/javascript">
$(document).ready(function () {
    $("#Order_PickUpDateTime").datetimepicker
        ({
            dateFormat: 'dd/mm/yy',
            showStatus: true,
            showWeeks: true,
            highlightWeek: true,
            numberOfMonths: 1,
            showAnim: "scale",
            ampm: true,
            hour: 12,
            minute: 0,
            stepMinute: 5,
            hourMin: 6,
            hourMax: 16,
            showOptions: {
                origin: ["top", "left"]
            }
        });
}); 
</script>

        <span class="field-validation-valid" data-valmsg-for="Order.PickUpDateTime" data-valmsg-replace="true"></span>
    </div>

【问题讨论】：

在浏览器中加载页面时是否看到 js 的语法错误？
@MuhammadAdeelZahid 不，没有错误。
生成的 HTML 中的相关部分会有所帮助
@TiesonT.: 两个准备都不是问题
快速提问，是否使用了handleUpdate 函数？看起来它与 onSuccess 回调非常相似。另外，如果您将 javascript 移动到外部文件并在您的视图中引用它，它是否有效？

标签： jquery asp.net-mvc-3 datetimepicker

【解决方案1】：

我自己想出来的。

我从页面顶部删除了以下 jQuery 引用，我的日期/时间选择器再次开始工作：

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

此文件已在我的 Razor Shared/_Layout.cshtml“母版页”中被引用。

我不知道为什么这种双重引用会导致日期时间选择器无法工作，但我很想听听任何人对此的想法。

【讨论】：