如何調用JavaScript函數來綁定動態添加的div

Question

我有一個壓光機控件，在選擇一個相應的日期時，我需要將“今日到期”和“到期”顯示為手風琴中的兩個部分。 我嘗試添加具有樣式的div來呈現手風琴的外觀，但是這會帶來UI問題。當前，我正計划添加手風琴（Jquery）。因此，在從日歷控件中選擇日期時將顯示手風琴。 我將手風琴div綁定在后面的代碼中，然后將其轉換為Json以顯示，同時選擇相應的日期。添加div的代碼如下：

[WebMethod(EnableSession = true)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string CalenderBinderAccordian()
    {
        try
        {
            //Code to fetch ProductGroup is not shown
        foreach (var p in productGroup)
        {
            string todoString = "";
            int uniqueID = Guid.NewGuid().GetHashCode();
            todoString = "<div id='accordion' class='ui-accordion ui-widget ui-helper-reset' role='tablist'><h3><a href=#" + uniqueID + "><b>Due Today</b></a></h3>";
            todoString += "<div>";
            foreach (var t in p.todo)
            {
                var tempAmt = String.Empty;
                if ((t.Amount == null) || t.Amount == String.Empty)
                    tempAmt = "0";
                else
                    tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
                todoString += "<p style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
                todoCount++;
            }
            todoString += "</div>";
            var overDue = temps.Select(x => new { x.DueDate }).Distinct().ToList();
            int overDueCount = 0;
            uniqueID = Guid.NewGuid().GetHashCode();
            todoString += "<h3><a href=#" + uniqueID + "><b>Over Due</b></a></h3>";
            int todoCount1 = 1;
            todoString += "<div>";
            for (int i = 0; i < overDue.Count(); i++)
            {
                if ((Convert.ToDateTime(overDue[i].DueDate) - Convert.ToDateTime(p.dates)).Days < 0)
                {
                    overDueCount++;
                    var overDueList = temps.FindAll(x => x.DueDate.Equals(overDue[i].DueDate)).ToList();
                    foreach (var t in overDueList)
                    {
                        var tempAmt = String.Empty;
                        if ((t.Amount == null) || t.Amount == String.Empty)
                            tempAmt = "0";
                        else
                            tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
                        todoString += "<p  style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount1.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
                        todoCount++;
                        todoCount1++;
                    }
                }
            }
            todoString += "</div>";
            todoString = todoString + "</div>\",\"count\":\"" + todoCount + "\"},";
            jsonString = jsonString + String.Format("{{\"{0}\" : \"{1}\",\"{2}\" : \"{3}", "dates", p.dates, "todo", todoString);
            if (overDueCount.Equals(0))
            {
                jsonString = jsonString.Replace("<h3><a href=#" + uniqueID + "><b>Over Due</b></a></h3><div></div>", "");
            }
        }
        jsonString = jsonString.TrimEnd(',');
        jsonString = '[' + jsonString + ']';
        string data= jsonString;
        return data;
    }
    catch (Exception ex)
    {
        throw;
    }
}    

ascx頁面中的代碼如下：/

/Scripts for Calender control
           <script type="text/javascript" src="../../Scripts/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="../../Content/jquery.calendarPicker.css" type="text/css" media="screen"/>
   <script type="text/javascript" src="../../Scripts/jquery.calendarPicker.js"></script>
    <link rel="stylesheet" href="../../Content/style.css" type="text/css" media="screen"/>
//Scripts for accordion
  <link rel="stylesheet" href="../../Content/jquery-ui.css" />
  <script  type="text/javascript" src="../../Scripts/jquery-ui.js"></script>
  <script  type="text/javascript">
        $(function () {
            $("#accordion").accordion();
        });
    </script>
     <div class="calendercontent">
        <div id="dsel1" style="width:200px;">
            <a href="" onclick="calendarPicker1.changeDate(new Date())"></a>
            <span id="span1"></span>        
        </div>
        <img class="ref" src="../../Images/refresh_circle.gif" alt="refresh" title="refresh"/>
        <div id="todo"></div>
    </div> 

請注意，當我在ascx頁面中添加div數據時，手風琴工作正常並使用fireBug顯示了手風琴類，但是由於手風琴數據已添加到后面的代碼中並使用Java腳本顯示，因此以下顯示的功能不是工作。 請幫忙，我是Jquery的初學者。

<script  type="text/javascript">
            $(function () {
                $("#accordion").accordion();
            });
        </script>

Answer 1

這是因為在DOM准備就緒時調用了手風琴函數$(function () { ...並且到那時DOM中還沒有動態添加的div ..因此，在顯示動態生成的div之后，調用手風琴函數。 。

//code to display your dynamic div..
$("#addedDivID").accordion();  //call the accordion function (again) after that..

Answer 2

試試這個：

$(document).find("#accordion").accordion();