Jquery在MVC Razor中重新加载

本文关键字：加载 新加载 MVC Razor Jquery | 更新日期: 2023-09-27 18:21:38

背景：这是我的脚本文件。当单击部分视图中的添加按钮时，我需要复制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。在最后一步之后，功能再次重新加载并打印"Entered function"（输入的功能）。

Jquery在MVC Razor中重新加载

检查这个-尝试以这种方式使用，示例

<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');
});
});

在文档就绪上注册您的点击事件，如：

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

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

这是因为函数还附加在$（"#Master"）中，所以它也再次运行。。。。并且您不需要一次又一次地注册点击事件。。。

所以您只需要在准备好的文档上注册一次。

我不确定$('#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);
    });
});
相关文章：