Jquery not working on html called in from Ajax scripts
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);
}
});
}
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();
}
精彩评论