ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: tamiyalagu ที่ 18 ธันวาคม 2009, 11:34:59


หัวข้อ: [jquery] เวลาเรียก ajax ให้สร้างโค้ดมา แล้วทำไมมันใช้ไม่ได้
เริ่มหัวข้อโดย: tamiyalagu ที่ 18 ธันวาคม 2009, 11:34:59
สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน ajax.php มาแทนที่
แต่ปัญหาคือข้อมูลที่ดึงมาให้ เวลาเอาเม้าไปวางมันไม่เปลี่ยนสี มันมีทางแก้หรือเปล่าครับ

ไฟล์แรก
โค๊ด:
<script type='text/javascript'>
$(document).ready(function() {

	$('#test span').hover(function(){
		$(this).css("color","#0000FF");
	});

	$('#test').live( 'click' , function(){
		$.get(ajax.php",function(data){
			$("#test").html(data);
		});
	});

});
</script>

<div id='test'>
	<span id='1'>111</span>
	<span id='2'>222</span>
</div>

ส่วนไฟล์ ajax.php
โค๊ด:
<?echo "<span id='3'>333</span>";?>

หัวข้อ: Re: [jquery] เวลาเรียก ajax ให้สร้างโค้ดมา แล้วทำไมมันใช้ไม่ได้
เริ่มหัวข้อโดย: @@@ ที่ 18 ธันวาคม 2009, 11:43:08
อ้างจาก: tamiyalagu ที่ 18 ธันวาคม 2009, 11:34:59
สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน ajax.php มาแทนที่
แต่ปัญหาคือข้อมูลที่ดึงมาให้ เวลาเอาเม้าไปวางมันไม่เปลี่ยนสี มันมีทางแก้หรือเปล่าครับ

ไฟล์แรก
โค๊ด:
<script type='text/javascript'>
$(document).ready(function() {

	$('#test span').hover(function(){
		$(this).css("color","#0000FF");
	});

	$('#test').live( 'click' , function(){
		$.get(ajax.php",function(data){
			$("#test").html(data);
		});
	});

});
</script>

<div id='test'>
	<span id='1'>111</span>
	<span id='2'>222</span>
</div>

ส่วนไฟล์ ajax.php
โค๊ด:
<?echo "<span id='3'>333</span>";?>

เจ้า jquery นี้ไม่รู้เค้าใช้กันยังงัยไม่ค่อยได้ใช้ด้วยสิ
อยากรู้เหมือนกัน

หัวข้อ: Re: [jquery] เวลาเรียก ajax ให้สร้างโค้ดมา แล้วทำไมมันใช้ไม่ได้
เริ่มหัวข้อโดย: Aussawinning ที่ 18 ธันวาคม 2009, 11:58:51
อ้างจาก: tamiyalagu ที่ 18 ธันวาคม 2009, 11:34:59
สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน ajax.php มาแทนที่
แต่ปัญหาคือข้อมูลที่ดึงมาให้ เวลาเอาเม้าไปวางมันไม่เปลี่ยนสี มันมีทางแก้หรือเปล่าครับ

ไฟล์แรก
โค๊ด:
<script type='text/javascript'>
$(document).ready(function() {

	$('#test span').hover(function(){
		$(this).css("color","#0000FF");
	});

	$('#test').live( 'click' , function(){
		$.get(ajax.php",function(data){
			$("#test").html(data);
		});
	});

});
</script>

<div id='test'>
	<span id='1'>111</span>
	<span id='2'>222</span>
</div>

ส่วนไฟล์ ajax.php
โค๊ด:
<?echo "<span id='3'>333</span>";?>

ลองเปลี่ยนเป็น $('#test span').live('hover', ...

ได้มั้ยครับ

หัวข้อ: Re: [jquery] เวลาเรียก ajax ให้สร้างโค้ดมา แล้วทำไมมันใช้ไม่ได้
เริ่มหัวข้อโดย: tamiyalagu ที่ 18 ธันวาคม 2009, 12:03:12
ไม่ได้ครับ

หัวข้อ: Re: [jquery] เวลาเรียก ajax ให้สร้างโค้ดมา แล้วทำไมมันใช้ไม่ได้
เริ่มหัวข้อโดย: g-ji ที่ 18 ธันวาคม 2009, 12:31:05
อ้างจาก: tamiyalagu ที่ 18 ธันวาคม 2009, 11:34:59
สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน ajax.php มาแทนที่
แต่ปัญหาคือข้อมูลที่ดึงมาให้ เวลาเอาเม้าไปวางมันไม่เปลี่ยนสี มันมีทางแก้หรือเปล่าครับ

ไฟล์แรก
โค๊ด:
<script type='text/javascript'>
$(document).ready(function() {

	$('#test span').hover(function(){
		$(this).css("color","#0000FF");
	});

	$('#test').live( 'click' , function(){
		$.get(ajax.php",function(data){
			$("#test").html(data);
		});
	});

});
</script>

<div id='test'>
	<span id='1'>111</span>
	<span id='2'>222</span>
</div>

ส่วนไฟล์ ajax.php
โค๊ด:
<?echo "<span id='3'>333</span>";?>

เอาเฉพาะตัวเปลี่ยนสีละกัน ดึงข้อมูลได้อยู่แล้วนิ ??

จากโค้ดนะ

<div id='test'>
   <span id='1'>111</span>
   <span id='2'>222</span>

แนะนำว่า ให้เพิ่ม class เข้าไปที่ตัว span เช่น

<div id='test'>
   <span id='1' class='red'>111</span>
   <span id='2' class='red'>222</span>

ตัว jquery ก็แก้เป็นแบบนี้

/*สามารถกำหนดสีดั้งเดิมไปเลยก็ได้*/

$('#test span').css({"color","black"});

/*เมื่อเอาเมาส์วางไว้บน คลาสนี้ จะกลายเป็นแดง*/

$('#test .red').mouseover(function(){
      $(this).css("color","red");
   });

/*พอเอาเมาส์ออกก็เปลี่ยนสีกลับ แนะนำให้ใส่สีเดียวกับที่ใช้เดิม*/

$('#test .red').mouseoutr(function(){
      $(this).css("color","black");/*ใส่สีอะไรก็ได้*/
   });


ตัวอย่างนะ ลองๆ ปรับใช้ดู


หัวข้อ: Re: [jquery] เวลาเรียก ajax ให้สร้างโค้ดมา แล้วทำไมมันใช้ไม่ได้
เริ่มหัวข้อโดย: tamiyalagu ที่ 18 ธันวาคม 2009, 12:55:13
อ้างจาก: g-ji ที่ 18 ธันวาคม 2009, 12:31:05
อ้างจาก: tamiyalagu ที่ 18 ธันวาคม 2009, 11:34:59
สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน ajax.php มาแทนที่
แต่ปัญหาคือข้อมูลที่ดึงมาให้ เวลาเอาเม้าไปวางมันไม่เปลี่ยนสี มันมีทางแก้หรือเปล่าครับ

ไฟล์แรก
โค๊ด:
<script type='text/javascript'>
$(document).ready(function() {

	$('#test span').hover(function(){
		$(this).css("color","#0000FF");
	});

	$('#test').live( 'click' , function(){
		$.get(ajax.php",function(data){
			$("#test").html(data);
		});
	});

});
</script>

<div id='test'>
	<span id='1'>111</span>
	<span id='2'>222</span>
</div>

ส่วนไฟล์ ajax.php
โค๊ด:
<?echo "<span id='3'>333</span>";?>

เอาเฉพาะตัวเปลี่ยนสีละกัน ดึงข้อมูลได้อยู่แล้วนิ ??

จากโค้ดนะ

<div id='test'>
   <span id='1'>111</span>
   <span id='2'>222</span>

แนะนำว่า ให้เพิ่ม class เข้าไปที่ตัว span เช่น

<div id='test'>
   <span id='1' class='red'>111</span>
   <span id='2' class='red'>222</span>

ตัว jquery ก็แก้เป็นแบบนี้

/*สามารถกำหนดสีดั้งเดิมไปเลยก็ได้*/

$('#test span').css({"color","black"});

/*เมื่อเอาเมาส์วางไว้บน คลาสนี้ จะกลายเป็นแดง*/

$('#test .red').mouseover(function(){
      $(this).css("color","red");
   });

/*พอเอาเมาส์ออกก็เปลี่ยนสีกลับ แนะนำให้ใส่สีเดียวกับที่ใช้เดิม*/

$('#test .red').mouseoutr(function(){
      $(this).css("color","black");/*ใส่สีอะไรก็ได้*/
   });


ตัวอย่างนะ ลองๆ ปรับใช้ดู



เอ.. อันนี้มันก็ไม่ได้แก้อะไรนี่ครับแค่เปลี่ยนวิธีเรียกในส่วนเปลี่ยนสี
แต่จุดที่เป็นประเโ็นหลัก คือ object ที่ถูกสร้างจาก ajax มันจะไม่รู้จัก จะทำยังไงให้มันรู้จักอ่ะครับ

หัวข้อ: Re: [jquery] เวลาเรียก ajax ให้สร้างโค้ดมา แล้วทำไมมันใช้ไม่ได้
เริ่มหัวข้อโดย: tamiyalagu ที่ 18 ธันวาคม 2009, 13:42:00
ตอนนี้พอจะได้บ้างแล้วครับ

ต้องใช้คำสั่ง live ในทุกส่วนเลยครับ
 

หัวข้อ: Re: [jquery] เวลาเรียก ajax ให้สร้างโค้ดมา แล้วทำไมมันใช้ไม่ได้
เริ่มหัวข้อโดย: suphot.s ที่ 18 ธันวาคม 2009, 14:09:14
ใช่แล้วครับ
เพราะว่า jQuery จะไม่รู้จัก object ที่โหลดเข้ามาใหม่
วิธีแก้ให้ใช้ live หรือไม่ก็ reblind event ใหม่ ใน function get อ่ะคับ


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com