部分视图中的Javascript如何使其仅在页面上多次出现部分视图时才出现一次

Question

我有一些类似的html：

<input type="button" value="Show message" class="messagebtn btn" disabled="disabled" />
<img class="loader" style="display: none;" alt="Loading..." src="@Url.Content("~/Content/Images/ajax-loader.gif")" />
<div class="peopleresultsdiv">
</div>
<script type="text/javascript">
    $(document).ready(function () {
    $('.messagebtn').click(function () {
        alert("Hi");
    }
    });
</script>

现在，所有这些都在PartialView中，而这个局部视图在DisplayFor内部。

我必须在一页上显示DisplayFor三次，这样您才能有效地获得：

<input type="button" value="Show message" class="messagebtn btn" disabled="disabled" />
<img class="loader" style="display: none;" alt="Loading..." src="@Url.Content("~/Content/Images/ajax-loader.gif")" />
<div class="peopleresultsdiv">
</div>
<script type="text/javascript">
    $(document).ready(function () {
    $('.findpersonbtn').click(function () {
        alert("Hi");
    }
    });
</script>
<input type="button" value="Show message" class="messagebtn btn" disabled="disabled" />
<img class="loader" style="display: none;" alt="Loading..." src="@Url.Content("~/Content/Images/ajax-loader.gif")" />
<div class="peopleresultsdiv">
</div>
<script type="text/javascript">
    $(document).ready(function () {
    $('.findpersonbtn').click(function () {
        alert("Hi");
    }
    });
</script>
<input type="button" value="Show message" class="messagebtn btn" disabled="disabled" />
<img class="loader" style="display: none;" alt="Loading..." src="@Url.Content("~/Content/Images/ajax-loader.gif")" />
<div class="peopleresultsdiv">
</div>
<script type="text/javascript">
    $(document).ready(function () {
    $('.findpersonbtn').click(function () {
        alert("Hi");
    }
    });
</script>

因此，首先，将javascript在页面上重复3次是一种不好的做法吗？

第二件事是，当我单击其中一个按钮时，我收到了三次“ Hi”警报。 我猜是有道理的，因为脚本在屏幕上重复了三遍。

有谁知道如何解决这个问题，所以每次单击按钮我只会收到一次消息。

毕竟说三遍嗨是有点过头了。

Answer 1

因此，首先，将JavaScript在页面上重复3次是一种不好的做法吗？

是的，这很糟糕。 您已经注意到，除了在数据传输和加载时间方面不必要地增加页面权重页面之外，它还会造成重复的麻烦。

解决该问题的一种方法是异步加载脚本。 检查您的脚本是否已经加载（在Razor部分视图中）：

// check in the global scope for "MyFunctions" object, and a "doWireup" method
if (!window.MyFunctions || !window.MyFunctions.doWireup) {

    // if it doesn't exist, load it from "myfunctions.js"
    $.getScript(@Url.Content("Scripts/myfunctions.js"), function() {

        // execute wireups
        window.MyFunctions.doWireup();
    });
} else { 
    window.MyFunctions.doWireup();
}

您的脚本myfunctions.js应该包含doWireup函数：

// get or create "MyFunctions" object in the global scope
var my = window.MyFunctions || (window.MyFunctions = {});

// add "doWireup" method to it
my.doWireup = function() {
    $('.findpersonbtn').click(function () {
        alert("Hi");
    });
};

使用Require.js ， Cassette或类似方法 ，可以很好地实现这种脚本管理以及依赖关系管理。 如果您使用的是MVC4，可能还值得研究其脚本捆绑功能 。

---

编辑

我想如果您只有几行简短的脚本（例如您的示例），则上述内容可能会显得过大。 更好/直接的方法可能是简单地检查部分视图的脚本是否已在当前页面上运行。 只需修改以添加一个全局范围的布尔值：

$(document).ready(function () {
    if (typeof window.HasScriptRun == "undefined")
    {
        window.HasRunScript = true;

        $('.findpersonbtn').click(function () {
            alert("Hi");
        }
    }
});

Answer 2

我的建议是从HTML片段中删除javascript，然后将其简单地包含在页面的页眉或页脚中。

Answer 3

您具有相同脚本的三个实例，因此为每个按钮添加了三个事件侦听器。 请记住，当所有元素都已存在于DOM中时，一旦页面加载， $(document).ready(function(){})执行。

选择器$('.findpersonbtn')可能会匹配多个元素（在您的情况下为3），并且将点击侦听器添加到每个匹配的元素中。 您不必为每个实例运行代码，jQuery已经为您完成了。

顺便说一下，选择器与您的示例中的任何内容都不匹配，但是我想findpersonbtn是原始代码中每个按钮实例的类。

在函数内部， this将引用被单击的元素。 您可以通过执行$(this)将其作为jQuery使用。 因此，例如，如果每个按钮都显示不同的消息，则可以：

<input type="button" value="Show message 1" class="findpersonbtn messagebtn btn" data-message="hi"/>
<input type="button" value="Show message 2" class="findpersonbtn messagebtn btn" data-message="hello"/>
<input type="button" value="Show message 3" class="findpersonbtn messagebtn btn" data-message="salut"/>

<script type="text/javascript">
$(document).ready(function () {
  $('.findpersonbtn').click(function () {
    alert($(this).data('message'));
  });
});
</script>