Question

我需要在UserControl中插入一些JavaScript代码，我通过jQuery Ui Tabs从Ajax调用加载。让我解释一下......

这是我的View（加载了jQuery）

<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs").tabs({
        cache: false,
        });
        getContentTab (1);
    });

    function getContentTab(index) {
        var url='<%= Url.Content("~/Home/getUserControl") %>/' + index;
        var targetDiv = "#tabs-" + index;

        $.get(url,null, function(result) {
            $(targetDiv).html(result);
        });
    }
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" onclick="getContentTab(1);">Nunc tincidunt</a></li>
        <li><a href="#tabs-2" onclick="getContentTab(2);">Proin dolor</a></li>
        <li><a href="#tabs-3" onclick="getContentTab(3);">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
    </div>
    <div id="tabs-2">
    </div>
    <div id="tabs-3">
    </div>
</div>

使用这些代码行，我调用Ajax函数将内容加载到DIV中。这是来自控制器的Action：

public ActionResult getUserControl(int num)
    {
        return PartialView("TestUC", num);
    }

这是UserControl ......

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
Number... <span id="testSpan"><%=Model.ToString() %></span>!! 
<input type="button" value="Click me!!" onclick="message();" />
<script type="text/javascript">
function message(item) {
    alert($("#testSpan").html());
}
</script>

问题是message（）函数总是返回1（而不是返回正确的数字）。

我的问题是......我应该如何将脚本添加到UserControl以使我的代码正常运行？

Answer 1

我只是在这里猜测。

我猜您的问题是，当加载选项卡时，即使您打开另一个选项卡，它也会保留在DOM中（即如果＃1是默认值，即使您单击第二个选项卡也会保持加载状态）。

如果发生这种情况，当你调用消息函数时，会有多个id为“testSpan”的元素，而jQuery selector $（“＃testSpan”）将返回第一个元素。

我想这只是一些测试代码，但对于这种特殊情况，我会添加＆lt;％= Model.ToString（）％＆gt;作为javascript函数的参数。

同样，我只是猜测jquery-ui tabs（）函数的行为。

此致

Answer 2

尝试像这样添加脚本

<script type="text/javascript" defer="defer">
function message(item) {
    alert($("#testSpan").html());
}
</script>

使用Javascript在jQuery Ui Tabs中动态加载UserControl

2 个答案: