انتخاب تگ با jquery

imsiso · Jul 3, 2012

با سلام
می خواستم بدونم چه طور میشه یه شی ر و که با javascript ایجاد کردیم و در تگ های html وجود نداشته رو به وسیله selector های jquery انتخاب کنیم.
در حالتی که تگ در سند وجود داشته باشه مشکلی ندارم ولی وقتی با javascript یه سری تگ به سند اضافه می کنم نمی تونم با selector انتخابشون کنم
ممنون میشم کمکم کنید
کمی تا قسمتی فوری

eAmin · Jul 4, 2012

اگر قبل از اون تگ بصورت داینامیک اضافه شده باشه، هیچ مشکلی نیست. همونطور که می بینید این کد بدرستی اجرا میشه:

کد:

window.onload = function() {
	var ele = document.createElement('div');
	ele.id = 'ell';
	ele.innerHTML = 'test';
	document.body.appendChild(ele);
	
	console.log(document.getElementById('ell').innerHTML);
}

imsiso · Jul 9, 2012

مرسی ولی منظورم این نبود

کدتون یه element رو به درستی به صفحه اضافه می کنه.
ولی من میخوام بدونم چیکار کنم که تگ هایی که به این روش یا روش های مشابه به سندمون اضافه شده را با selector های jquery مورد خطاب قرار داده و روی آنها عملیاتی را انجام دهیم.
مثلا property یشان را عوض کنیم و یا تابعی را برای onclick آن ها قرار دهیم.

قسمتی از کد html

کد:

<body>
<p>p1</p>
</body>

قسمتی از jquery

کد:

$(document).ready(function(){
    $('p').click(function(){
        alert('are'); 
        var ele = document.createElement('p');
        ele.innerHTML = 'test'; 
        document.body.appendChild(ele);          
    });
});

بعد از کلیک بر روی پاراگراف اول پاراگراف دوم ایجاد می شود.
ولی پاراگراف ایجاد شده مانند پاراگراف قبلی با click بر آن پیغام را نمایش نمیدهد؟!

sharktech · Jul 9, 2012

برای تگ هایی که بعدا توسط js به صفحه اضافه میشن باید از دستور live استفاده کرد :

HTML:

$(document).ready(function(){
    $('p').live('click', function(){
        var ele = document.createElement('p');
        ele.innerHTML = 'test'; 
        document.body.appendChild(ele);          
    });
});

imsiso · Jul 9, 2012

آیا میشه از این روش برای دستورات دیگر استفاده کرد

مرسی فقط اینکه آیا برای بقیه دستورات مانند animate ، css و each و غیره هم می توان از این روش استفاده کرد؟

eAmin · Jul 11, 2012

منظورتون از استفاده کردن به چه صورت هست؟ live که کارش مشخص هست.
وقتی دارید با jQuery کار میکنید بهتره از تمامی امکاناتش استفاده کنید، اینکه بیاید در حین استفاده از jQuery از امکانات پایه ای JavaScript استفاده کنید کار بسیار اشتباهی هست!
در مثالی که شما گذاشتید، اونطوری که من از پست آخر شما متوجه شدم اگر اون رو به اینصورت تغییر بدید در استفاده از متدهایی که نام بردید محدودیتی ندارید:

کد:

$(document).ready(function(){
    $('p').live('click', function(){
	$("<p />").html('test').appendTo('body');         
    });
});

http://api.jquery.com/jQuery/#creating-new-elements

imsiso · Jul 15, 2012

وقتی دارید با jQuery کار میکنید بهتره از تمامی امکاناتش استفاده کنید

بله بنده به شخصه تا حدی موافقم ولی وقتی میتوان با دو سه تا دستور ساده javascript بدون اینکه تفاوتی حاصل شود به مقصود رسید لزومی به استفاده از دستورات jquery نیست چون دستورات javascript در سمت کاربر سریع تر از jquery هستند.البته شاید زیاد مهم نباشه

در مثالی که شما گذاشتید، اونطوری که من از پست آخر شما متوجه شدم اگر اون رو به اینصورت تغییر بدید در استفاده از متدهایی که نام بردید محدودیتی ندارید:

بله حق با شماست با این روش به راحتی می توان دستورات گفته شده را به راحتی انجام داد ولی اگر این تگ (<p>) قبلا به یک شی اضافه شده باشد بایستی با سلکتور به آن دسترسی پیدا کرد تا بتوان دستورات css و animate و غیره را بر روی آن اعمال کرد. آیا همینطوره؟

من خودم تونستم یه جورایی با selector های jquery این دستورات را بر روی اشیای به صورت پویا اضافه شده اعمال کنم ولی دنبال یه روش کلی و اصولی می گردم.
به طور مثال برای دستیابی به <p> اضافه شده به <div>

قسمتی از کد html

کد:

<div id="mdiv">
</div>

قسمتی از jquery

کد:

$(document).ready(function(){
    $('<p></p>').addClass('class1').html('somthing').appendTo('div#mdiv');
/*   this code work */
    $('div#div1').children('p').css({'css'});
/*    this one not work i think */
    $('div#div1 p').css({'css'});
});