1

我在 ASP.NET UpdatePanel 中有一个中继器，如下所示；

<asp:UpdatePanel ID="rptGalleries" runat="server">
<ContentTemplate>
    <asp:Repeater ID="rptAddPhotoGalleries" runat="server">
        <ItemTemplate>
            <div>
                 <input type="checkbox" id="chkNews" data-newsid='<%# Eval("NewsID") %>' runat="server" onclick="javascript:markNews($(this).data('newsid'));" />
            </div>
        </ItemTemplate>
     </asp:Repeater>
</ContentTemplate>

我在 HTML 的元素中使用以下 javascript；

<script type="text/javascript">
    $(document).ready(function () {
        function markNews(nID) {
          var $span = $('span[data-newsid="' + nID + '"]')
          $span.hide('slow');
        }
    });
</script>

当我单击生成的复选框时，控制台中出现如下错误；

ReferenceError: markNews is not defined
javascript:markNews($(this).data('newsid'));

有人有想法么？

4

4 回答 4

4

您应该像在这个演示中那样定义您的函数：

<script type="text/javascript">
    function markNews(nID) {
        var $span = $('span[data-newsid="' + nID + '"]');
        $span.hide('slow');
    }
</script>

jQuery$(document).ready(function () {定义了一个内部范围，因此您的函数只能在内部访问。

另一种方法是编写扩展：

$(document).ready(function () {
    $.fn.markNews = function (nID) {
        var $span = $('span[data-newsid="' + nID + '"]');
        $span.hide('slow');
    }
});

您可以直接在元素上调用该函数，例如

<input type="checkbox" id="chkNews" data-newsid='1' runat="server"
       onclick="javascript:$(this).markNews($(this).data('newsid'));" />

这是一个演示。

话虽如此，这甚至可以通过读取函数内部的 id ( demo ) 来改进：

$.fn.markNews = function () {
    var nID = $(this).data('newsid'),
        $span = $('span[data-newsid="' + nID + '"]');
    $span.hide('slow');
}

我对最终解决方案的建议

为了避免不必要的代码，我会在外部（全局）范围内使用该函数并在 jQuery 事件中调用它：

function markNews() {
    var nID = $(this).data('newsid'),
        $span = $('span[data-newsid="' + nID + '"]');
    $span.hide('slow');
}

$(document).ready(function () {
    $('#Ctl_rptAddPhotoGalleries > input').on('click', markNews);
});

当然#Ctl_rptAddPhotoGalleries必须用呈现的 id 替换（例如'#<%=rptAddPhotoGalleries.ClientID%> > input'）。

有了它，你<input/>的 s 可以像

<input type="checkbox" data-newsid='<%# Eval("NewsID") %>' runat="server" />

这是一个演示。

于 2013-05-07T16:58:56.397 回答
1

因为您将函数定义包装在document ready事件中，所以在定义函数之前会解析和呈现 html。这就是它给出该错误的原因。

您应该将它放在 ready 事件之外以及依赖它的相关元素之前的任何位置。

于 2013-05-07T17:01:34.883 回答
0

函数 markNews 仅存在于您传递的准备就绪的匿名函数的范围内。因此，您不能将其分配到其范围之外。

但是您不需要为此创建命名函数（除非您需要在示例代码中未显示的其他地方调用该函数）：

$(function(){
    $("#<%=rptAddPhotoGalleries.ClientId %> span").click(function(){
        $(this).hide('slow');
    });
});
于 2013-05-07T17:06:46.737 回答
0

您想要input代替span，因为中继器控件中没有 span 标签。

<script type="text/javascript">
    function markNews(nID) {
        var $input = $('input[data-newsid="' + nID + '"]');
        $input.hide('slow');
    }
</script>
于 2013-05-07T17:20:13.413 回答