如何在动态加载的用户控件 (ascx) 中运行 javascript？

Question

我有一个网页，它动态地将同一用户控件 (.ascx) 的多个实例加载到并通过后端的 LoadControl 更新面板。 在用户控件中，我有一个 javascript，我想在用户控件加载完成后运行它。 但是，每次页面回发并添加新的用户控件时，javascript 都不会运行。

我试过添加 $(this).load(function(){...}); 在用户控件的开头，但这似乎没有受到影响。 我尝试使用 RegisterStartupScript 在用户控件的 Page_Load 末尾运行一些脚本，但这似乎也没有运行。 我无法在 google chrome 中调试，所以我不知道。

这是我来自用户控件 (.ascx) 的 javascript：

<script type="text/javascript">

    // using the clientIDs as names so they only partain to this instance of sectionDetails on the facultyRequest page
    var <%=spanDateRange.ClientID%>,
        <%=aDateRange.ClientID%>, <%=aSpecificDates.ClientID%>;

    function initSection<%=ClientID%>() {
        <%=spanDateRange.ClientID%> = $('#<%=spanDateRange.ClientID%>')[0];
        <%=aDateRange.ClientID%> = $('#<%=aDateRange.ClientID%>')[0];
        <%=aSpecificDates.ClientID%> = $('#<%=aSpecificDates.ClientID%>')[0];

        // have to bind the events here because you can't use asp inside tag attributes

        $(<%=aDateRange.ClientID%>).click(function () {
            <%=spanDateRange.ClientID%>.hidden = false;
        });

        $(<%=aSpecificDates.ClientID%>).click(function () {
            <%=spanDateRange.ClientID%>.hidden = true;
        });

        <%=aDateRange.ClientID%>.click();
    }

</script>

spanDateRange、aDateRange、aSpecificDates 都是我的用户控件中的所有 div (runat="server")

这是 .ascx.cs 文件中我的 Page_Load：

 protected void Page_Load(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "initSection", "initSection" + ClientID + "();", true);
        }

这是我动态加载用户控件的多个副本的地方：

protected void LoadSections()
        {
            var numSections = utils.Utils.Clamp(int.Parse(tbNumSections.Text), int.Parse(tbNumSections.Attributes["Min"]), int.Parse(tbNumSections.Attributes["Max"]));
            for (int i = 2; i <= numSections && numSections != tbodySections.Controls.Count - 2; i++) // start at 2 because there's always 1 section, don't load any more sections if they're already loaded
            {
                var newSection = (usercontrols.sectionDetails)LoadControl("usercontrols/sectionDetails.ascx"); // load a new sectionDetails control
                newSection.SectionNumber = i;

                tbodySections.Controls.AddAt(i + 1, newSection);
            }
        }

我希望在加载每个部分后，加载事件会被捕获，或者启动脚本会运行，但我认为动态加载的用户控件中没有任何 javascript 正在运行。 我试过将用户控件直接放入页面，所以我知道我的 javascript 在语法上是正确的。

Answer 1

ajax html响应中的asp.net eval脚本

就是这个！ ^^^

首先，我必须将代码隐藏中的 LoadSections() 从 Page_Load 移动到 Page_Init。

然后，在我的 UpdatePanel 中，我有：

            // this function runs after each postback
            function pageLoad() {
                evaluateScripts('#<%=tbodySections.ClientID%>'); //pass the table body (tbodySections) so we can run the js inside each user control
            }

然后在母版页中，我有：

        // this will run any javascript in the selected div
    function evaluateScripts(divSelector) {
        $(divSelector).find('script').each(function () {
            if (this.src) {
                $('body').append(this);
            }
            else {
                var content = $(this).html();
                eval(content);
            }
        });
    }

每次回发后，我可以动态加载我需要的任意数量的部分，然后通过函数 pageLoad 和evaluateScripts 连接js 中的所有事件

Answer 2

我不确定您使用的 JavaScript 的语法。 但是，在 ASCX 文件完全加载之前，听起来您的代码正在引用 ASCX 文件中的某些内容。

为此，您必须添加您希望在 ASCX 文件本身中运行的脚本。 在 ASCX 文件的末尾，添加以下代码：

  <script type="text/javascript">
        window.addEventListener("load", function() 
        {
              alert('ascx loaded!');

             // enter your code here you want to run when ASCX is ready.
    });
  



</script>

上面，当放置在你的 ASCX 文件的末尾时，将触发“ascx加载！” 在警报框中。 您应该能够修改此示例以避免调用尚不存在的元素。