如何让我的 JavaScript 在转发器中工作？答案

【问题标题】：How do I make my JavaScript work within repeater?如何让我的 JavaScript 在转发器中工作？
【发布时间】：2015-08-27 16:14:49
【问题描述】：

我有一个使用中继器的 asp.net 项目。

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
            <asp:label ID="lblexp" runat="server" Text="05/11/1981" Visible="false"></asp:label>
        </HeaderTemplate>
        <ItemTemplate>                
            <div id="myNest" class="grid">
            <div class="imgholder">
                <img src="<%# Eval("ImageAlt1")%>" />
            </div>        
            <strong><%# Eval("ItemName")%> <bdo style="color:green;">$<%# Eval("ItemPrice")%></bdo></strong>
            <p class="test"><%# Eval("ItemDescription")%></p>
            <div style="color:red; font-size:small;"><asp:Label ID="lblExp" Text='<%# Bind("CreateDate") %>' runat="server" /></div>
            <div class="meta"><%# Eval("Email")%></div>
            </div>
        </ItemTemplate>
        <FooterTemplate>
            <asp:label ID="lblexp" runat="server" Text="05/11/1981" Visible="false"></asp:label>
        </FooterTemplate>

和一些 javascript 来缩短 ItemDescription

<script type="text/javascript">
    var after = 5;
    var html = $(".grid p.test").html();
    html = html.substring(0, after) + "<span> ...</span>";
    $(".grid p.test").html(html);
</script>

无论出于何种原因，javascript 都无法看到转发器中的项目。我该如何解决这个问题？

错误是 Uncaught TypeError: Cannot read property substring of undefined

【问题讨论】：

这个问题让我回想起我的网络表单时代。哈哈。你的脚本标签在哪里？在我看来，它没有找到任何匹配 '.grid p.test' 的元素，这让我相信您的脚本在 DOM 完全加载之前正在运行。
您确定要删除客户端的多余内容吗？在服务器端执行此操作会更有效，因此您不会发送他们不需要的客户端数据。

标签： javascript c# asp.net substring

【解决方案1】：

这里有两个可能的问题：

JS 在相关标记被渲染之前运行。要解决这个问题，只需将您的 js 包装在某种文档加载处理程序中：

$(function() {
    var after = 5;
    var html = $(".grid p.test").html();
    html = html.substring(0, after) + "<span> ...</span>";
    $(".grid p.test").html(html);
});

html() 调用为您提供选择器匹配列表中第一项的内部 html。您可能会对所有找到的项目执行此操作，在这种情况下，将您的 html 操作放入 each()。顺便考虑一下text 而不是html，它看起来更适合您的情况。

【讨论】：

【解决方案2】：

我怀疑您的脚本在加载 DOM 之前正在运行。要么将该脚本标签移动到您的 </body> 标签上方，要么像这样包装您的脚本：

<script type="text/javascript">
  $(function () { // equivalent to $(document).on('ready', function...
    var after = 5;
    var html = $(".grid p.test").html();
    html = html.substring(0, after) + "<span> ...</span>";
    $(".grid p.test").html(html);
  });
</script>

传入的函数只会在 DOM 准备好解析后运行。这意味着在整个页面准备好之前，您的逻辑不会运行。

【讨论】：