Why the dynamic created textboxbutton do not do the jquery behavior

Last Reply on Mar 15, 2012 06:12 AM By bee90124

Posted on Mar 12, 2012 03:50 AM

Hello,

I have a div that has a class of "delbtn"

inside that div, there is a txtbox + a delbtn(an image)

and I write a simple jquery file so that whenever i move on the delbtn, the image will be change to another.

However, If I dynamically create the same set of div:txtbox+ delbtn, all having the same setting, using the Jquery, the mouse over effect doesnt work.

and I try to press F-12 the developer tool in IE, i even found that the dynamically created textbox is not included in the page (and therefore i cant select those dynamically created objects by using the F-12 selection tool)..

But if i tried to type sthing on the textbox, it can display normally..
Anyone has the idea on it?
Great THanks!

Posted on Mar 13, 2012 01:20 AM

Use this sample. I have 2 classes where I have set 2 different images one normal and one on hover

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type = "text/css">
    .img{background-image:url(deleteblue.png);height:23px;width:23px;display:inline-block}
    .img-hover{background-image:url(deletered.png);height:23px;width:23px;display:inline-block}}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $(".img").live("mouseover", function () {
            $(this).attr("class", "img-hover");
        });
        $(".img-hover").live("mouseout", function () {
            $(this).attr("class", "img");
        });
        function GetDynamicTextBox(value){
            return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
                    '<a class = "img" onclick = "RemoveTextBox(this)"></a>'
        }
        function AddTextBox() {
            var div = document.createElement('DIV');
            div.innerHTML = GetDynamicTextBox("");
            document.getElementById("TextBoxContainer").appendChild(div);
        }

        function RemoveTextBox(div) {
            document.getElementById("TextBoxContainer").removeChild(div.parentNode);
        }

        function RecreateDynamicTextboxes() {
            var values = eval('<%=Values%>');
            if (values != null) {
                var html = "";
                for (var i = 0; i < values.length; i++) {
                    html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
                }
                document.getElementById("TextBoxContainer").innerHTML = html;
            }
        }
        window.onload = RecreateDynamicTextboxes;
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />
    <br />
    <br />
    <div id="TextBoxContainer">
        <!--Textboxes will be added here -->
    </div>
    <br />
    <asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />
    </form>
</body>
</html>