افزوده شدن تو در توی کد با کلیک در جی کوئری
سلام
یک بخش دارم که نیاز هست به ازای هر کلیکی که میشه یک سکشن بهش اضافه بشه و درون اون سکشن یک دکمه است که هروقت کلیک شد باید فیلدبه اون اضافه بشه و این اضافه کردن هر بخش بدون محدودیت باشه. در کد زیر هربار که کلیک میشه بر ای ایجاد section بدون مشکل انجام میشه اما وقتی میخوام به این سکشن با کلیک بر روی add-field یک فیلد اضافه کنم نمیشه.
jQuery(document).ready(function ($) {
$('.add-new').on('click',function (e) {
var section = '<div class="section"></div>';
$('.section-list').append(section);
});
$('.add-field').on('click',function (e) {
var fields = '<input type="text">';
$('.section').append(fields);
});
})گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
@taratnm
دوست عزیز با توجه به توضیحاتی که نوشتی فکر کنم کد زیر خروجی دلخواه شما باشه.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery dynamic fields</title>
<style>
.section{
height: auto;
width: 200px;
border: 1px solid;
}
.add-field{
height: 20px;
}
</style>
</head>
<body>
<div class="wraper">
<div class="section-list"></div>
<div style="margin-top: 50px;"><button class="add-new">add-new</button></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$('.add-new').on('click',function (e) {
var section = '<div class="section"><button class="add-field">add-field</button></div>';
$('.section-list').append(section);
});
$(document).on('click', '.add-field', function(e) {
var field=$('<input type="text" name="fname">');
$( this ).parent().get( 0 ).append(field[0]);
});
</script>
</body>
</html>سلام @alirezadini
ممنون از اینکه به بهترین شکل پاسخ سوالم را دادید. بسیار عالی کار می کند.
2 سوال دیگر هم دارم اگر امکان داره راهنمایی کنید.
1-در بخش دوم که یک تکست فیلد اضافه میشه یعنی:
$( this ).parent().get( 0 ).append(field[0]);میخوام این تکست فیلد در یک div دیگر قرار بگیره برای مثال 'input-wrapper' که از قبل در کدهای html نوشته شده.
2-امکان حذف هر کدام از section ها و input های ایجاد شده بصورت جداگانه با کلیک بر روی حذف امکان پذیر بشه.
var section = '<div class="section"><span class="delete-sec">delete section</span><button class="add-field">add-field</button></div>';
.
.
var field=$('<div class="text-field"><span class="delete-input">Delete</span><input type="text" name="fname"></div>');پیشاپیش ممنونم