ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ

[secivon]

อธิบายไม่ค่อยถูกแฮะ รบกวนพยายามทำความเข้าใจหน่อยนะครับ - -''

ประมาณว่า ถ้าผมต้องการเขียน jQuery event handler ให้มันไป bind กับ DOM element ที่ generate on-the-fly ( เช่น generate มาจาก AJAX ) เนีย เท่าที่ทราบ คือ jQuery จะใช้ live() ในการ bind object กับ event เอา

ประเด็น คือ เท่าที่ผมดู Tooltip Plugin ผ่านๆมา 2-3 ตัว ( qtip2 , jQuery bubble popup )
ไม่ค่อยพูดถึงกรณีนี้เท่าไหร่อ่ะครับ ส่วนใหญ่จะเป็น static element มากกว่า (ส่วนใหญ่จะเน้นว่าไปดึง dynamic content มาแสดงในตัว tooltip ได้) โดยที่ส่วนใหญ่ plugin พวกนี้ จะเข้าไป handle พวก mouse event เองอยู่แล้ว

คำถามครับ
1.ถ้าผมจะทำให้ on-the-fly DOM นี่ทำงานร่วมกันกับ Tooltips Plugin นี่ มี Plugin ตัวไหนที่เป็น native (ไม่ต้องเขียน code จัดการ bind new Element / Event ) เลยไหมครับ
2.ถ้าจำเป็นต้องใช้ live() เข้ามาช่วยจริงๆ eventType ควรจะต้องเป็นอะไรครับ ( ไม่น่าจะเป็น mouse event ?)


ขอบคุณครับ

[mindphp]

อ่านสองรอบ ล่ะ ยังไม่ค่อยเข้าใจเท่าไร
พอมีรูปตัวอย่างไหมครับ
แต่ที่เคยทำ DOM จะมีปัญหาเยอะถ้าเราสร้างอะไรขึ้นมาใหม่จาก DOM แล้ว เอามันไปใช้งานต่อ
แต่ถ้าเป็น html จาก Tooltip แล้วเรียกใช้งานอย่างอื่นอีกชั้นไม่น่าจะมีปัญหา

[secivon]

แทรกโค้ดไว้หน่อยนะครับ

Code: Select all

<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() {
			$('.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' 
					}
		   });		

			$('#main').html('<div class="hoverable" style="width:500px;height:300px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , &nbsp; hover me , live() binding will active , while qtip() will not</div>');

			$('.hoverable').live('mouseover', function() {
				$(this).css('border','solid 1px red');
			});
			$('.hoverable').live('mouseout', function() {
				$(this).css('border','');
			});

});
</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>

จากโค้ดคร่าวๆนี้ ผมอยาก apply tooltip กับ class ที่เป็น hoverable ทั้งหมด ซึ่งมีทั้ง static DOM และ on-the-fly ที่มาจาก AJAX ครับ (ใน code เอาเป็นว่า inject string ดื้อๆไปละกัน - -'')
ประเด็นคือ
1.เท่าที่ดูมา ไม่มี jQuery tooltip plugin ตัวไหน ที่ bind ตรงนี้ให้โดยอัตโนมัติ (แทบไม่พูดถึงเลย) เพื่อหลีกเลี่ยงความยุ่งยากในการ binding Element / Event (ดู 2. ประกอบ) ก็เลยอยากจะถามว่ามีใครพอรู้จัก Tooltips ที่มี feature ตรงนี้ให้แล้วบ้างไหมครับ
2.ถ้าหลีกเลี่ยงไม่ได้ และจำเป็นต้อง bind เอง , parameter eventType ของ live() เนี่ย ควรจะเป็นอะไรครับ เท่าที่คิดไว้ไม่น่าเป็น mouse event เพราะใน jQuery tooltip plugin น่าจะมีส่วนที่ handle event ตรงนี้ไว้แล้ว?
นั่นก็คือ ผมไม่รู้ว่าจะต้องใช้ parameter eventType ใน line 19 ,22 เป็นอะไรน่ะครับ - -''

[imsn]

เข้ามาร่วมด้วย ช่วยกันงง
หมึนตึบไปเลยครับ

[mindphp]

ลองสร้าง function ไปเรียก อีกที
ข้อมูลที่ส่งมา เพิ่ม event เข้าไป ให้ event นั้นเรียก function ที่สร้างขึ้นมา

Code: Select all

	$('#main').html('<div class="hoverable" onclick="getxx()"  style="width:500px;height:300px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , &nbsp; hover me , live() binding will active , while qtip() will not</div>');

Code: Select all

function getxx() {
	alert('ทดสอบ');
}

ไม่รู้ตรงตามต้องการหรือเปล่านะครับ ได้ไม่ได้หรือ เข้าใจผิดยังไง ขออภัยด้วยครับ

[secivon]

โอ้ว ขอบคุณท่าน webmaster มากเลยครับ ผมลืม idea การเรียก function ไปซะสนิท

ตอนนี้ได้ลองแก้ script ดูแล้วครับ แต่แทนที่จะฝัง event ลงไปใน Element ที่สร้างขึ้นมาใหม่
ก็เปลี่ยนเป็นเมื่อมีการจะแก้ไข / สร้าง element ใหม่ ( ในจุดที่จะเอาไปใช้คือรับ response ของ AJAX )
ก็ให้ Qtip ทำการ initialize() ใหม่หมดอีกครั้ง

Code: Select all

<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 , &nbsp; 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">