使用asp.net创建动态div（面板）后如何调用jquery方法答案

【问题标题】：How to call a jquery method after dynamic divs(panel) are created using asp.net使用asp.net创建动态div（面板）后如何调用jquery方法
【发布时间】：2012-12-10 17:12:59
【问题描述】：

我的 asp.net 页面加载时只有一个文本框和一个按钮，此时没有隐藏元素。
单击按钮时，它会根据结果进行处理并创建 div 的数量（面板）。 Div 将导致它们为 Pass、Fail、Neutral 等。这是由 asp.net 异步 Web 服务调用发生的，无需任何页面刷新
现在，在创建 div 之后，我想使用 jQuery 分析这些 div 的内容并向这些 div 添加特定属性。例如，Div 背景颜色为绿色表示通过，琥珀色表示中性等。将来会根据需要进行更多处理。
我只能在 asp.net 中执行此操作，但我希望将 div 突出显示的内容与 asp.net 代码分开，jquery 将更适合。
（问题）关于在网页上创建这些 div 后如何触发 jquery 方法的任何建议。

编辑 1：我正在尝试这个，但不起作用。

$(document).on("create", '[id*="GridComp"]', function () { 
    alert("Created 1");
    // change background color of divs or any other thing
});

【问题讨论】：

标签： jquery asp.net html triggers panel

【解决方案1】：

是的，您可以使用live 或on（这取决于您当前使用的jquery 版本）

$("#DIV1").live("EventName", function(){

    //...

});

为了提高他们，你可以使用这个：

$("#DIV1").trigger("EventName");

【讨论】：

触发 jquery 的事件名称是什么。我正在尝试这个但不工作。请注意，我正在使用选择器，因为 asp.net 中的 div 名称都与 clientids 混淆了。 $(document).on("create", '[id*="GridComp"]', function () {`alert("Created 1");`});
这取决于你要触发什么事件，我现在会更新我的回复
我不确定事件。在页面上创建 div1 时，一旦创建/可见，就会运行一些 jquery 方法，例如现在的警报。
如何将这些 DIV 添加到 DOM 中？！
使用 ASP.NET。 - 我在页面上有一个 ASP.NET 占位符（基本上是一个 DIV）作为 PlaceHolder1。 - 从 WebService 获得结果后，它会动态创建 Div（asp.net 中的面板）并将这些面板附加到页面上的占位符。 - PlaceHolder1.Controls.Add(Panel1); - 现在 .NET 部分已经结束，在 DIV 出现在页面上之后，我希望 jQuery 处理它们。

【解决方案2】：

你可以尝试使用你的jquery代码到pageLoad():

function pageLoad(){
//your jquery code is here
}

或者您可以从 asp.net 代码隐藏中调用一个 javascript 函数：

Page.ClientScript.RegisterStartupScript(this.GetType(), "call-your-function", "YourFunctionName();", true);

编辑：要在您的 js 文件中使用 pageLoad() 方法，您只需将 scriptmanager 添加到您的 asp.net 代码中一次。

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

然后，您可以在文档准备好后在pageLoad(){} 中做任何您想做的事情。

【讨论】：

从我的代码隐藏调用 JavaScript 会起作用，但我想将所有 JavaScript 内容与我的 c# 代码分开。
只需将您的 asp.net 代码添加一次：<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 现在，您可以在 .js 文件中使用 pageLoad() 方法。注意：pageLoad() 函数只能使用一次。

【解决方案3】：

做一件事为这些div提供一个类假设“abc”是一个css类并将这个类应用于这些div。然后检查这些div的内容如下：

 if ($('.divclass').html() != "Pass") 
 {
    $('.divclass').addClass("css class name of Pass");
    //Or
   $('.divclass').css('background-color', 'Green');
 }

 if ($('.divclass').html() != "Fail") 
 {
    $('.divclass').addClass("css class name of Fail");
    //Or
   $('.divclass').css('background-color', 'Red');
 }

【讨论】：

但是什么时候检查这些 div 的内容呢？
同意 Sanjeev，何时触发这些方法。我正在寻找一种解决方案，以便在这些 div 出现在页面上时立即调用这些方法。由于页面加载也没有发生，我无法在 document.ready() 中调用它们
是否有任何公共属性被添加到这些 div 中，比如类名？

【解决方案4】：

如果那些 div 的 Id 属性包含“GridComp”。然后您可以使用 setInterval 方法并继续检查 div 的存在。如果找到，则根据包含的文本设置这些 div 的样式并清除间隔。

var intervalId;
$(function(){
    intervalId = setInterval(styleDynamicDivs, 500);
});

function styleDynamicDivs(){

    if($('div[id*="GridComp"]').length > 0){
        clearInterval(intervalId);

        $('div[id*="GridComp"]').each(function(){
            var result = $.trim($(this).text().toLowerCase());
            if(result == "pass"){
                $(this).css('background-color', 'Green');
            }
            else
            {
                $(this).css('background-color', 'red');
            }
        });
    }
}

【讨论】：

确实有效。竖起大拇指。 :) 我仍在寻找 javascript/jquery 中的解决方案，例如回调方法或动态 div 创建触发器。到那时我将使用这种方法。