Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → JavaScript, TypeScript, ECMAScript → зміна елементу, доданого через jQuery
Для відправлення відповіді ви повинні увійти або зареєструватися
▼Прихований текст
Replace написав:1) У тебе тут пусті value:
$('.contact-data').append('<div class="contact-block new"><select name="" class="contacts" form="form"><option value="">Skype</option> <option value="">Facebook</option> <option value="">Linkedin</option> <option value="">Other</option> </select><input type="text" class="contact-name" form="form"><a href="#">Delete</a></div>');2) Перевіряти краще так:
$(this).val()=="other"так чому пусті, якщо я схоплюю подію при зміні значення?
Тому, що по дефолту у першому html value вписані вами заздалегідь, а в новому html append - ні. Ви, як Не пхпшник мали б це помітити 
P.s Те,що ви бачите між тегами - це не value 
P.s Те,що ви бачите між тегами - це не value
я знаю, що це не value, я просто провтикала змінити їх в апенді як кретин
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
<link rel="stylesheet" href="form.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<form method="post" id="form" action="">
<table>
<tfoot>
<tr>
<th><label>Controls</label></th>
<td>
<label for="contact_options">Select new contact option</label>
<select name="" class="contacts" id="contact_types">
<option value="skype" data-width="150px">Skype</option>
<option value="facebook" data-width="200px">Facebook</option>
<option value="linkedin" data-width="80px">Linkedin</option>
<option value="other" data-width="90px">Other</option>
</select>
<input type="button" id="add_contact" value="Add new">
</td>
</tr>
</tfoot>
<tr>
<th><label>Contacts</label></th>
<td class="contact-cell">
<div class="contact-data">
<div class="contact-block">
<select name="" class="contacts" form="form">
<option value="skype">Skype</option>
<option value="facebook">Facebook</option>
<option value="linkedin">Linkedin</option>
<option value="other">Other</option>
</select>
<input type="text" class="contact-name" form="form"><a href="#">Delete</a>
</div>
</div>
<br><br>
</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
$(function(){
$('#add_contact').click(function(){
var new_contact_block$ = $('<div class="contact-block new"><select name="" class="contacts" form="form"><option value="skype">Skype</option> <option value="facebook">Facebook</option> <option value="linkedin">Linkedin</option> <option value="other">Other</option> </select><input id="contact_value" type="text" class="contact-name" form="form"><a href="#">Delete</a></div>');
var contact_type$ = $('#contact_types :selected');
new_contact_block$.find('#contact_value').width(contact_type$.data('width'));
new_contact_block$.find('[value=' + contact_type$.val() + ']').prop('selected', true);
$('.contact-data').append(new_contact_block$);
}
);
$(document).on('click', 'a', function(){
$(this).parent().remove();
});
//-------------------маніпуляції з довжиною------------------------------
$(document).on('change', '.contacts', function(){
if ($(this).val()=="other") {
$(this).siblings(".contact-name").width("180px");
} else {
$(this).siblings(".contact-name").width('100px');
};
});
});
</script>це навіщо?
Ну не знаю. Я так і не зрозумів чи у вас там довжина міняється чи ні.
та міняється, що треба і як треба
Для відправлення відповіді ви повинні увійти або зареєструватися