JQUERY css class not work on dynamically add div

Using JQuery-1.6.2 and drag and drop plugins

following is code in webform1.aspx

$(document).ready(function() {
    $( ".draggable" ).draggable({ revert: "invalid" , helper: "clone" });

    $( ".droppable" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
      开发者_运维技巧      addFields( ui.draggable );
        }
    });

});

on drop i am calling addfields function which is as follow

function addFields($items)
{
    var content=$(".droppable")
    ans_type=$items.attr("id")
    i= parseInt(document.getElementById('txtQCnt').value);
    document.getElementById('txtQCnt').value=i+1;
    $.ajax
    (
        {
            url:'handler.ashx?ans_type='+ans_type+'&cnt='+document.getElementById('txtQCnt').value,
            dataType:'html',
            success: function(data)
            {
                var i;
                content.append(data);
            }
        }
   )
}

handler.ashx add the element to the page

context.Response.Write("<div id='"+objId+"' class='droppable'></div>");

on dynamically add div from handler.ashx, when object being dragged droppable div css class should highlight, which is not working

Either you have to bind the droppable inside the success method -

$('.droppable').droppable(options);

where you can make the options as constants and define only once.

Else, you can bind live to the element on mouseenter or hover at which the droppable can be attached.

$('.droppable').live('mouseenter',function() {
    $(this).droppable(options);
});