Jquery not working on html called in from Ajax scripts

Question

I've had a look at some of the other post i could not make heads or tails of them. the jquery works fine when page is load be when the same elements are loaded from the ajax script the jquest doesn't work. i understand i need to do a clal back but can some please show me how this is written?

html:

<div id="item-list2"> 
<div class="content drag-desired">
<div class="product"><img src="img/products/iPod.png" alt="iPod" width="128" height="128" class="pngfix" />iPod</div>
<div class="product"><img src="img/products/iMac.png" alt="iMac" width="128" height="128" class="pngfix" />iMac</div>
</div>                
</div>

jquery:

$(document).ready(function(){

    $(".product img").draggable({

    containment: 'document',
    opacity: 0.6,
    revert: 'invalid',
    helper: 'clone',
    zIndex: 100

    });

    $("div.content.drop-here").droppable({

            drop:
                    function(e, ui)
                    {
                        var param = $(ui.draggable).attr('src');

                        if($.browser.msie && $.browser.version=='6.0')
                        {
                            param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
                            param = param[1];
                        }


                        viewlist(param);
                        addlist(param);
                    }

    });


});

Ajax script:

function viewlist(param)
{
    $.ajax({
    type: "POST",
    url: "ajax/items.php",
    data: 'img='+encodeURIComponent(param),
    dataType: 'json',
    beforeSend: function(x){$('#ajax-loader').css('visibility','visible');},
    success: function(msg2){

        $('#item-list2').append(msg2.txt);

    }
    });
}

karim79 · Accepted Answer · 2011-04-13 16:10:33Z

2

If you put all of your draggable/droppable initialization code into a function, say init(), then in your call back you would simply do:

success: function(msg2){
             $('#item-list2').append(msg2.txt);
             // init draggable and droppable on replace elements
             init();
         }

answered Apr 13, 2011 at 16:10

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery not working on html called in from Ajax scripts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related