在@Html.ActionLink中未调用Javascript

Javascript not being called in @Html.ActionLink

本文关键字：调用 Javascript @Html ActionLink      更新时间：2024-04-21

我有以下javascript test.js文件：

$("#addItem").click(function () {
    alert("yup");
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) { $("#bandRows").append(html); }
    });
    return false;
});

我想用它将一些HTML注入页面上的"bandRows"div中。我在MVC 3应用程序中使用Razor，如下所示：

索引视图，其中包含一个链接，当单击该链接时，会注入部分视图HTML:

@model IEnumerable<TariffBand>
        <script type="text/javascript" src="=@Url.Content("~/Scripts/jquery-1.3.2.js")"></script>
        <script type="text/javascript" src="=@Url.Content("~/Scripts/MicrosoftAjax.js")"></script>
        <script type="text/javascript" src="=@Url.Content("~/Scripts/test.js")"></script>
    <h2>Index</h2>
    @using (Html.BeginForm())
    {
    <div id="bandRows">
        @foreach (var band in Model)
        {
            Html.RenderPartial("BandEditorRow", band);
        }
    </div>
    @Html.ActionLink("Add band...", "Add", null, new { id = "addItem" })
    <input type="submit" value = "Done" />

目前，当我点击链接时，没有调用javascript，也没有显示警报框，链接只是导航到"添加"部分视图，而不是将其注入"bandRows"分区。

有人能告诉我为什么吗？我以前没有使用过javascript，所以我显然做了一些愚蠢的事情，但我一辈子都做不出来。

EDIT-我已经修改了.js文件，所以处理程序是用于点击而不是点击。我还尝试将html助手修改为：

@Html.ActionLink("add band...", "Add", null, new { onclick = "addItem" }，但仍然没有骰子。

谢谢David

您有

$("#addItem").onclick(function ()

没有什么能比得上$.onclick。

这将是

$("#addItem").click(function ()

编辑

$().ajax({应为$.ajax({

并且整个代码应该像一样在CCD_ 5内

$(document).ready(function(){
   $("#addItem").click(function (){
   .
   .
   .
});

编辑-2

正如你所承认的，你对javascript世界非常陌生，我给出了详细的代码：

<script type="text/javascript" src="=@Url.Content("~/Scripts/MicrosoftAjax.js")"></script>
@* <script type="text/javascript" src="=@Url.Content("~/Scripts/test.js")"></script> *@
<h2>Index</h2>
<script type="text/javascript">
    $(document).ready(function(){
        $("#addItem").click(function (){
            alert("yup");
            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) { 
                    $("#bandRows").append(html); 
                }
            });
            return false;
        };  
    });
</script>

document ready是启动jQuery时需要学习的一个非常初步的东西。这是ready事件的API文档。这里有一个理解document ready的教程。

相关文章：