0

私は次のjavascripttest.jsファイルを持っています：

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

これを使用して、ページの「bandRows」divにHTMLを挿入します。私はMVC3アプリで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」divに挿入するのではなく、「追加」部分ビューに移動します。

誰か教えてもらえますか？私はこれまでjavascriptを使用したことがないので、明らかに何か気の利いたことをしたことがありますが、私の人生ではそれを解決することはできません。

編集-ハンドラーがonclickではなくclick用になるように.jsファイルを修正しました。また、htmlヘルパーを次のように修正してみました。

@Html.ActionLink("add band...", "Add", null, new { onclick = "addItem" }しかし、それでもサイコロはありません。

ありがとうDavid

4

1 に答える 1

2

あなたが持っている

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

のようなものはありません$.onclick。

これは次のようになります

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

編集

$().ajax({する必要があります$.ajax({

コード全体が次のようにある必要がありdocument.ready()ます

$(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。イベントのAPIドキュメントですready。そして、ここに理解のためのチュートリアルがありますdocument ready。

于 2012-07-28T13:53:47.397 に答える