ASP.NET Repeater 中的 javascript 函数

Question

我在 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'));

有人有主意吗？

Answer 1

您应该像这个演示一样在外部定义您的函数：

<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 来改进（演示）：

$.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 就可以像

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

这是一个演示。