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

你应该像this demo那样在外部定义你的函数:

<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'));" />

Here is a demo.

---

话虽如此，这甚至可以通过读取函数内的 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" />

Here is a demo.