Question

我有一个局部视图，本质上是一个小部件。我想要介于1和＆＃39; n＆＃39;这些都在同一页上。

我遇到的问题是我无法在每个人中执行javascript。

e.g。

Index.cshtml

<div>
   @Html.Partial("_ButtonPartialView")
    <br/>
    <br />
   @Html.Partial("_ButtonPartialView")
</div>

_ButtonPartialView.cshtml

<h2>ButtonView</h2>
<button id="foo">
    on
</button>

BundleConfig.cs

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

Layout.cshtml

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

test.js

$(document).ready(function() {
    $('#foo').click (function() {
        if ($('#foo').html() === 'on') {
            $('#foo').html('off');
        } else {
            $('#foo').html("on");
        }
    });
});

我的问题是，当我点击第一个按钮时，它会在打开和关闭之间切换。当我点击第二个按钮时，没有任何反应！

我的更大问题，如果我可以让它发挥作用。我显然希望我的所有部分视图都是独立的。例如我不想点击一个按钮，它们都会触发。它们都将被传递给模型，我需要编写JS来完成该模型的工作并显示信息。

因此每个小部件都需要独立。

由于

Answer 1

正如评论中所提到的，id必须是唯一的。如果您想按ID引用按钮，则需要生成唯一ID。

更简洁的方法是使用类选择器而不是$(this)来引用触发事件的按钮实例。

$(".foo").on("click", function(e) {
    var btn = $(this);
    var state = btn.html();
    ...
});

Answer 2

触发动态添加内容的脚本，您需要将事件绑定到文档。将您的点击事件更改为

$(document).on('click', '#foo', function() {
    if ($('#foo').html() === 'on') {
        $('#foo').html('off');
    } else {
        $('#foo').html("on");
    }
});

然后如另一个答案所述，将选择器更改为部分特定

MVC部分视图和Javascript

2 个答案: