在Ajax控件中定位元素

时间:2015-06-01 16:17:34

标签: javascript jquery html css ajax

我正在尝试通过使用其css类定位按钮容器并附加新按钮来在Ajax HtmlEditorExtender控件中创建自定义按钮。但是我陷入了第一阶段,因为我无法找到容器:

在JQuery中:

$btnContainer = $(".ajax__html_editor_extender_buttoncontainer");
window.alert($btnContainer.length);

即使容器中有按钮

,警报也会生成0

或在香草jscript中:

var x = document.getElementsByClassName("ajax__html_editor_extender_buttoncontainer");
                               window.alert(x.length);

警告再次产生0

页面上带有css类名的其他元素可以这种方式定位,但是找不到Ajax控件中的元素(即使它们出现在带有上述css类名的Firebug中)。

有人可以帮忙吗?

已添加04/06/15

非常感谢你的建议。找到控件确实是一个时间和回发问题,而不是将元素放在另一个控件中。如果我删除除了重要位之外的所有内容,这就是下面的代码。

无论我将调用放到JQ函数中,它都找不到想要的项目。没有任何(注释掉的)调用它的方法。只有从页面上的按钮启动才有效。还试过在page.LoadComplete从codebehind调用JQ,但这似乎也太快了。

任何帮助表示感谢。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="EventsEdit.aspx.vb" Inherits="admin_EventsEdit"
    ValidateRequest="false" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="../Scripts/jquery-2.0.2.min.js"></script>
    <script type="text/javascript">

        function showcontainerJQ() {
            $btnContainer = $(".ajax__html_editor_extender_buttoncontainer");
            alert($btnContainer.length);
            $btnContainer.append("<input id=\"HtmlEditorExtender_H1\" class=\"ajax__html_editor_extender_YourButtonName\" type=\"button\" name=\"YourButtonName\" title=\"YourButtonName\" style=\"width: 21px; height: 21px;\" unselectable=\"on\"></input>");
        }

        //window.onload = showcontainerJQ();
        //document.onload = showcontainerJQ();
        //body.onload = showcontainerJQ();
    </script>
    <style type="text/css">
        .ajax__html_editor_extender_HtmlEditorExtender_H1
        {
            background: url('/images/YourButtonName_off.png') no-repeat scroll;
            cursor: hand;
            display: block;
            float: right; /* default is left */
            border: medium none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>

        <input type="button" onclick="showcontainerJQ()";value="H1"; > add button</input>
        <br /><br />

        <asp:TextBox ID="TextBox1" runat="server" Height="400px" Text='<%# Bind("eventText") %>'
            Width="265px"></asp:TextBox>
        <asp:HtmlEditorExtender ID="TextBox1_HtmlEditorExtender" DisplaySourceTab="true"
            EnableSanitization="false" runat="server" Enabled="True" TargetControlID="TextBox1">
            <Toolbar>
            </Toolbar>
        </asp:HtmlEditorExtender>
    </div>
    </form>
</body>
</html>

0 个答案:

没有答案