How To Make Clone Of Dropdown With Data Bound It Too?

I have a div which contains a a dropdown with data bound to it and an input type text datepicker and a textbox. I want to make a clone of the div with a new id of clone, input type

Solution 1:

Here is a clone mechanism, cloning events as well http://jsfiddle.net/dg30gj27/.

Note, you are using asp tags in your example, you should use HTML tags in your example as: http://code.runnable.com/UjB_wxmQpvw8AAAw/asp-net-how-to-use-dropdownlist click on run and inspect the resulted Html.

This method presented here clone all client events, you may have problems with events handling on code behind, you need to check event source in order to perform the correct action on server.

// Original element with attached datavar $elem = $( "#destinations" ).data( "arr", [ 1 ] ),
    //withDataAndEvents (default: false) Type: Boolean"
    cloned = $elem.clone( true )
    // Deep copy to prevent data sharing
    .data( "arr", $.extend( [], $elem.data( "arr" ) ) );

cloned.attr("id", cloned.attr("id") + "_cloned");
cloned.find( "*" ).each(function(){
    if ($(this).attr("id") != undefined && $(this).attr("id").length > 0)
    {
        $(this).attr("id", $(this).attr("id") + "_cloned");
    }
});
console.log(cloned);
cloned.prependTo(".wrapper");