2

我有一些像这样的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>

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

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

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

毕竟说三声嗨有点过头了。

4

3 回答 3

1

因此，首先，在页面上重复 3 次 Javascript 是不是这种不好的做法

是的，这很糟糕。正如您所注意到的，除了在数据传输和加载时间方面不必要地添加到页面权重页面之外，它还会因重复而令人头疼。

解决它的一种方法是异步加载脚本。检查您的脚本是否已经加载（这在 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");
        }
    }
});
于 2012-11-21T20:16:19.533 回答
0

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

于 2012-11-21T20:10:21.850 回答
0

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

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

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

在函数内部，this将引用被单击的元素。你可以通过$(this). 因此，例如，如果每个按钮都有不同的消息要显示，您可以：

<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>
于 2012-11-21T20:26:11.860 回答