โอ้ว ขอบคุณท่าน webmaster มากเลยครับ ผมลืม idea การเรียก function ไปซะสนิท
ตอนนี้ได้ลองแก้ script ดูแล้วครับ แต่แทนที่จะฝัง event ลงไปใน Element ที่สร้างขึ้นมาใหม่
ก็เปลี่ยนเป็นเมื่อมีการจะแก้ไข / สร้าง element ใหม่ ( ในจุดที่จะเอาไปใช้คือรับ response ของ AJAX )
ก็ให้ Qtip ทำการ initialize() ใหม่หมดอีกครั้ง
โค้ด: เลือกทั้งหมด
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.js"></script>
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.css" />
<link rel="stylesheet" type="text/css" href="jquery.qtip.css" />
<script type="text/javascript">
$(document).ready(function() {
function doQtipInit() {
$('.hoverable').qtip({
content : {text : 'This is Random Text<img src="http://www.google.com/intl/th/images/logos/translate_logo.gif">' }
, position: { my: 'top center' , at : 'bottom center'}
, style: {
classes: 'ui-tooltip-shadow ui-tooltip-light'
}
});
}
$('.hoverable').live('mouseover', function() {
$(this).css('border','solid 1px red');
});
$('.hoverable').live('mouseout', function() {
$(this).css('border','');
});
$('#btnAddContent').click(function() {
$('#main').append('<div class="hoverable" style="width:500px;height:100px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , hover me , live() binding will active , while qtip() will not</div>');
doQtipInit();
})
// first call for static element
doQtipInit();
});
</script>
<div id="demo-tips" class="hoverable" style="background:#E1E1E1;padding:15px;">I'm static Element, Hover me! both live() and qtip() should do the trick</div>
<center id="main"> </center>
<div id="divDebug"></div>
<input type="button" value="Add content" id="btnAddContent">
โอ้ว ขอบคุณท่าน webmaster มากเลยครับ ผมลืม idea การเรียก function ไปซะสนิท :oops:
ตอนนี้ได้ลองแก้ script ดูแล้วครับ แต่แทนที่จะฝัง event ลงไปใน Element ที่สร้างขึ้นมาใหม่
ก็เปลี่ยนเป็นเมื่อมีการจะแก้ไข / สร้าง element ใหม่ ( ในจุดที่จะเอาไปใช้คือรับ response ของ AJAX )
ก็ให้ Qtip ทำการ initialize() ใหม่หมดอีกครั้ง
[code]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.js"></script>
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.css" />
<link rel="stylesheet" type="text/css" href="jquery.qtip.css" />
<script type="text/javascript">
$(document).ready(function() {
function doQtipInit() {
$('.hoverable').qtip({
content : {text : 'This is Random Text<img src="http://www.google.com/intl/th/images/logos/translate_logo.gif">' }
, position: { my: 'top center' , at : 'bottom center'}
, style: {
classes: 'ui-tooltip-shadow ui-tooltip-light'
}
});
}
$('.hoverable').live('mouseover', function() {
$(this).css('border','solid 1px red');
});
$('.hoverable').live('mouseout', function() {
$(this).css('border','');
});
$('#btnAddContent').click(function() {
$('#main').append('<div class="hoverable" style="width:500px;height:100px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , hover me , live() binding will active , while qtip() will not</div>');
doQtipInit();
})
// first call for static element
doQtipInit();
});
</script>
<div id="demo-tips" class="hoverable" style="background:#E1E1E1;padding:15px;">I'm static Element, Hover me! both live() and qtip() should do the trick</div>
<center id="main"> </center>
<div id="divDebug"></div>
<input type="button" value="Add content" id="btnAddContent">[/code]