[jquery] เวลาเรียก ajax ให้สร้างโค้ดมา แล้วทำไมมันใช้ไม่ได้

[tamiyalagu]

สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน 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>";?>

[@@@]

สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน 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 นี้ไม่รู้เค้าใช้กันยังงัยไม่ค่อยได้ใช้ด้วยสิ
อยากรู้เหมือนกัน

[Aussawinning]

สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน 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', ...

ได้มั้ยครับ

[tamiyalagu]

ไม่ได้ครับ

[g-ji]

สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน 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");/*ใส่สีอะไรก็ได้*/
   });


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

[tamiyalagu]

สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน 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 มันจะไม่รู้จัก จะทำยังไงให้มันรู้จักอ่ะครับ

[tamiyalagu]

ตอนนี้พอจะได้บ้างแล้วครับ

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

[suphot.s]

ใช่แล้วครับ
เพราะว่า jQuery จะไม่รู้จัก object ที่โหลดเข้ามาใหม่
วิธีแก้ให้ใช้ live หรือไม่ก็ reblind event ใหม่ ใน function get อ่ะคับ