change event дублиране на съдържание

teroristd

Registered
Здравейте, ще опитам да направя по-детайлно описание за да разберете проблема.
Имам радиобутони, които ще са много на брой но за примера нека са три. При натискане на радиобутон се изпълнява change event, в който викам един jquery плугин, който създава рамки, но нека за примера да използваме просто един append с текст. Проблема е че при всяко натискане на радиобутон това което викам в евента се натрупва, а целта е да е само един път на натискане.

Нека преди кода да дам пример какво се случва в момента.
Натискаме радиобутон 1 и се визуализира текст TEST.
Натискаме радиобутон 2 и се визуализира текст TEST TEST.
Натискаме радиобутон 3 и се визуализира текст TEST TEST TEST.
И така до безкрай. С други думи при всяко натискане се визуализира текст но стария от предишното си остава, а аз искам старото да се махне и да се зареди новото.

Ето и малко код.

<form id="myform" method="post">

<input type="radio" name="frame" value="TEST 1" />
<input type="radio" name="frame" value="TEST 2/>
<input type="radio" name="frame" value="TEST 3" />

<div class="inner"></div>

<input type="submit" name="submit" value="submit">

</form>

<script>

$('#myform input[type=radio]').bind('change', function (event) {

$( ".inner" ).append( "<p>TEST</p>" );

});

</script>
 
А защо append-ваш щом не искаш да се стакват? Просто използвай

Код:
$('.inner').html("<p>TEST</p>");
 
Благодаря ви за отговорите, но явно примера който съм дал не отговаря на реалната ситуация. Аз всъщност не искам да добавям текстове, ами викам един плугин, който взима клас на снимка и слага рамка около нея. Кода отдолу в този вид ще добавя една и съща рамка върху картинката при всяко натискане на радиобутон, една над друга. Целта ми е да добавя различни рамки според това кой бутон е натиснат без да ги трупа една върху друга. Ето линк към плугина има и демо за да добиете представа https://github.com/joonaspaakko/Image-Framer-jquery-plugin

Код:
HTML:
<form id="myform" method="post">

<input type="radio" value="frame_1" />
<input type="radio" value="frame_1/>
<input type="radio" value="frame_3" />

<div class="img-container">
	<img class="frame_1" src="path to image">
</div>

<input type="submit" name="submit" value="submit">

</form>

<script>

$('#myform input[type=radio]').bind('change', function (event) {

	$('.frame_1').imageframer();

});

</script>
 
Тогава можеш да си пазиш в променлива чисто копие на снимката без рамка. При change event я записваш в .img-container (тоест изчистваш снимката със старата рамка – както Revelation ти показа за смяна на текст) и върху новозаписаната чиста снимка викаш плъгина.

Иначе може и да има вариант ръчно да премахваш ефекта на плъгина, но тогава кодът ти зависи от вътрешната структура на тоя плъгин и не е рентабилно.
 
Точно изчистването не става. Пробвах хиляди варианти и не можах да го измисля.
 
Щом библиотеката не позволява да изчистваш рамката, тогава ресетваш нещата и прилагаш рамката наново.

В интерес на истината можеш да пробваш при onChange просто да смениш frameType-а. Т.е. за всеки радио бутон си запиши frameType-а и го подавай на плъгина като взимаш стойността от event.
 
Revelation каза:
Щом библиотеката не позволява да изчистваш рамката, тогава ресетваш нещата и прилагаш рамката наново.

В интерес на истината можеш да пробваш при onChange просто да смениш frameType-а. Т.е. за всеки радио бутон си запиши frameType-а и го подавай на плъгина като взимаш стойността от event.

Точно ресетването не се получава. Как да го направя? При смяна на frameType-а слага новия над предишния.
 
Благодаря на всички за отговорите. Успях да намеря решение. Оказва се че ако плугина не е предвидил изчистване не може директно да се ресетнат нещата. За това започнах да чистя елементите които добавя един по един. Така се получи.
 
Като видях как са го направили на демо страницата им и ми се щеше да се хвърля през прозореца.
 
Revelation каза:
Като видях как са го направили на демо страницата им и ми се щеше да се хвърля през прозореца.

Ако си разбрал нещо пак е добре, аз лично не можах :think:
 

Горе