Jquery 在 MVC Razor 中重新加载答案

【问题标题】：Jquery reloads in the MVC RazorJquery 在 MVC Razor 中重新加载
【发布时间】：2014-09-11 06:27:06
【问题描述】：

背景：这是我的脚本文件。单击部分视图中的添加按钮时，我需要复制 html。

//test.js
$(function () {


console.log("Entered function");


$(".add").click(function () {


    console.log("inside button");
    var $addHtml = $('#Master').html();
    console.log($addHtml.toString());

    $('#Master').append($addHtml);

    });
});

我已经在我的 bundle.config 中注册了这个

bundles.Add(new ScriptBundle("~/bundles/EventHandlers").Include(
                    "~/Scripts/test.js"));

我已经在主布局中加载了 jquery 库，并且

 @Scripts.Render("~/bundles/jquery")

我的部分视图包含

 @section Scripts {


@Scripts.Render("~/bundles/EventHandlers")
 }

和

  @RenderSection("scripts", required: false)

为相应的局部视图加载脚本

问题：我尝试过使用断点。在调试模式下，我能够在网页上查看新添加的 html。在最后一步之后，函数再次重新加载并打印“输入的函数”。

【问题讨论】：

标签： c# jquery asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

勾选这个-尝试以这种方式使用，示例

<div class="TargetElements">
        <div class="editor-label">
            @Html.LabelFor(model => model.PhoneNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PhoneNumber)
            @Html.ValidationMessageFor(model => model.PhoneNumber)
        </div>
 </div>

我使用了这个脚本：

(document).ready(function () {
$('.add').click(function () {
    $(".TargetElements:first").clone().insertAfter('.TargetElements:last');
});
});

【讨论】：

【解决方案2】：

在准备好的文档上注册您的点击事件，例如：

$(document).ready(function(){
       $(".add").click(function () {


       console.log("inside button");
       var $addHtml = $('#Master').html();
       console.log($addHtml.toString());

       $('#Master').append($addHtml);

    });
});

这是因为您的函数也附加在 $("#Master") 中，所以它也再次运行...... 而且你不需要一次又一次地注册点击事件...

因此您只需在准备好文件时注册一次。

【讨论】：

【解决方案3】：

我不确定$('#Master') 的内容是什么。如果您要附加完整的部分视图，那么Scripts.Render("~/bundles/EventHandlers") 行是您再次执行代码的原因。它将再次呈现脚本文件。

我会建议在您的局部视图中创建如下所示的容器 div ...

@section Scripts {


@Scripts.Render("~/bundles/EventHandlers")
 }
    <div id="mainDiv">
       <div id="contentDiv"> ....</div>

    </div>

和脚本类似

$(".add").click(function () {


    console.log("inside button");
    var $addHtml = $('#contentDiv').html();
    console.log($addHtml.toString());

    $('#Master').append($addHtml);

    });
});

【讨论】：

我没有附加完整的局部视图。复制包含标签和文本框的#master 的子 div。