سوال: کنترل عناصر اضافه شده بعد از لود شدن با جیکوری [بایگانی]

mohsen_31369

جمعه 05 اسفند 1390, 16:25 عصر

با سلام
من با جیکوری مشکلی دارم که با این مثال بیان می کنم.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn').click(function(){
$('table').append('<tr class="name"><td>reza</td><td>ahmadi</td></tr>');
});
$('.name').click(function(){
alert ('reza ahmadi');
});
});
</script>
</head>
<body>
<input type='button' value="click me" id='btn' />
<table>
<tr>
<td>name</td>
<td>family</td>
</tr>
</table>
</body>
</html>

وقتی ما عنصری با کلاس یا آیدی مشخص بعد از لود شدن صفحه اضافه کنیم. با جیکوری نمی توانیم آنها را سلکت کنیم. در مثالی که گذاشتم با کلیک برروی باتون عنصری با کلاس name به جدول اضافه می شود ولی کد مقابل
$('.name').click(function(){
alert ('reza ahmadi');
});

کار نمی کند.
در این گونه موارد به چه صورت این عناصر اضافه شده را با جیکوری انتخاب کنیم و رویداد ها و متدهای آن را تنظیم کنیم؟

buggen

جمعه 05 اسفند 1390, 17:55 عصر

این کد را جایگزین کنید

$(document).ready(function(){

$('#btn').click(function(){
var newItem = $('<tr class="name"><td>reza</td><td>ahmadi</td></tr>');
$('table').append(newItem);
newItem.click(function(){
alert('reza ahmadi');
});
});
});

موفق باشید

mohsen_31369

جمعه 05 اسفند 1390, 19:48 عصر

ببین من با ایجکس یک سری اطلاعات را از دیتابیس می خوانم و وارد جدول می کنم

$.getJSON('add.php',{add_number_id_group:id},funct ion(data){
$.each(data,function(key,val){
$('table').append('<tr><td>'+val.surname+'</td><td>'+val.family+'</td><td class="chang">chang</td><td class="delete">delete</td></tr>');

});

});

});

حالا مثلا کلاس chang را به چه صورت با جیکوری انتخاب کنم

buggen

جمعه 05 اسفند 1390, 20:08 عصر

روش انتخاب کردن شما درسته ولی چون کد شما on the flay ساخته میشه باید به شکلی که در پست قبل گفتم عمل کنید
که تو کد جدید شما میشه چیزی مثل این

$.getJSON('add.php',{add_number_id_group:id},funct ion(data){
$.each(data,function(key,val){
var newItem = $('<tr><td>'+val.surname+'</td><td>'+val.family+'</td><td class="chang">chang</td><td class="delete">delete</td></tr>');
$('table').append(newItem);
//be jaye estefade .selector ya #selector va ... az newItem estefade konid
//newItem.click(function(){ alert('reza ahmadi'); });
});
});

mohsen_31369

شنبه 06 اسفند 1390, 20:37 عصر

ضمن تشکر از شما
1-ولی این کدی که نوشتی را من با هاش هر جور ور می رم جواب نمی ده؟
2- من فقط می خوام کلاس chang را انتخاب کنم که ستونی از یک سطر است نه تمام سطر جدول را

buggen

شنبه 06 اسفند 1390, 20:58 عصر

سلام ببخشید اگه بد فهمیدم
این سمپل فکر کنم چیزی هست که شما لازم داری

$(document).ready(function(){

$('#btn').click(function(){
var newItem = $('<tr class="name"><td>reza</td><td>ahmadi</td></tr>');
$('table').append(newItem);
newItem.click(function(){
$(this).css("background-color","red");
});
});

});

mohsen_31369

یک شنبه 07 اسفند 1390, 20:37 عصر

ببین اون کدی که با json گذاشتم رو ببین با فرمان each چند سطر به جدول table اضافه می کنه که دارای ستون هایی با کلاسchang است.
<tr>
<td>name</td>
<td>family></td>
<td class='chang'>chang</td>
<td class='delete'>delete</td>
</tr>
حالا می خوام این کد اجرا بشه
$('.chang').click(function(){
// do something
});

این کدی که شما نوشتی اولا با فرمان each کار نمی کند
ثانیا به کل سطر اعمال می شود (<tr>) نه به td.chang

buggen

دوشنبه 08 اسفند 1390, 06:18 صبح

این کدی که شما نوشتی اولا با فرمان each کار نمی کند
ثانیا به کل سطر اعمال می شود (<tr>) نه به td.chang
tr رو بر اساس پست اولتون گذاشته بودم ولی راجب each ، شما این کد رو ببین با each هست و td

$(document).ready(function(){

$.each([1,2,3,4,5,6], function(index, value) {

var change=$('<td class="change">chang</td>');
var tds = $('<td>'+value+'</td><td>'+value+'00</td>').add(change).add('<td class="delete">delete</td>');
$('<tr class="name"></tr>').append(tds).appendTo('table');

change.click(function(){
$(this).css("background-color","red");
});

});

});

mohsen_31369

دوشنبه 08 اسفند 1390, 20:19 عصر

آقا مشکل حل شد، واقعا دستت دردنکنه فقط باید توابع را خارج از حلقه ی each قرار بدیم. روش جالبی بود.
بازم متشکرم

hakan648

شنبه 13 اسفند 1390, 15:20 عصر

سلام
منم در پروژه ای بصورت داینامیک تگ های HTML تولید میکردم (http://ajaxphonebook.developerteam.tk/)و همین مشکل رو داشتم - نیاز داشتم که وقتی بروی اون لینک های داینامیک کلیک شد , یه کاری انجام بشه اما اصلا اکشن کلیک برای اون تگ عمل نمی کرد .
برای حل این مشکل باید از تابع Live استفاده کرد .

این تاپیک رو ببینید ! (http://barnamenevis.org/showthread.php?316105)

موفق باشید ...