Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.11.2011, 10:09
Интересующийся
Отправить личное сообщение для Kuklavod Посмотреть профиль Найти все сообщения от Kuklavod
 
Регистрация: 01.11.2011
Сообщений: 14

Кто нибудь так делал?
Я написал скрипт по добовлению полей форм.
Есть система тестов при создании теста сразу выходят 10форм для 10 тестов, при нажатии на кнопку "еще" влазеет внизу еще 10 форм.
Тут все работает.
Но в каждой форме еще есть 5 вариантов ответа и кнопка "добавить вариант ответа" при нажатии которой добовляется еще одно поле для ответа в данную форму.

Проблема в том что кнопка "добавить вариант ответа" не работает для новых созданных элементов.
Вообще по идее она должн работать? Если да то как сделать чтоб она работала? Может есть функции по перестройки DOM дерева? А то плучается JS не видит добавленных кнопок.
Ответить с цитированием
  #2 (permalink)  
Старый 04.11.2011, 10:23
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от Kuklavod
Вообще по идее она должн работать?
Кому кроме вас это знать?
Сообщение от Kuklavod
А то плучается JS не видит добавленных кнопок
всё он видит если ему показать
Ответить с цитированием
  #3 (permalink)  
Старый 04.11.2011, 10:35
Интересующийся
Отправить личное сообщение для Kuklavod Посмотреть профиль Найти все сообщения от Kuklavod
 
Регистрация: 01.11.2011
Сообщений: 14

Сообщение от dmitriymar Посмотреть сообщение
Кому кроме вас это знать?

всё он видит если ему показать
var more_answer = $('.more_answer');
more_answer.click(function(){
           alert('l');
});

я показываю))
<div  class="question_item">
                    <div class="more_answer" >
                        Добавить еще ответы
                    </div>
                    <div class="item_answer" ></div>
                    <div class="item_answer" ></div>
                    <div class="item_answer" ></div>
                    <div class="item_answer" ></div>
                    <div class="item_answer" ></div>
                    <div class="else"></div>
                    </div>

Что удивительно функция работает для старых форм, а для новых не работает((
Ответить с цитированием
  #4 (permalink)  
Старый 04.11.2011, 11:04
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от Kuklavod
я показываю
...
Что удивительно функция работает для старых форм, а для новых не работает
Начнём с того что это не форма... Пока есть только один элемент с обработчиком... Никаких других элементов пока не наблюдается... И как они появляются так же не понятно...
При таком назначении обработчика он ну никак больше нигде не появится...
Ответить с цитированием
  #5 (permalink)  
Старый 04.11.2011, 11:37
Интересующийся
Отправить личное сообщение для Kuklavod Посмотреть профиль Найти все сообщения от Kuklavod
 
Регистрация: 01.11.2011
Сообщений: 14

Сообщение от ksa Посмотреть сообщение
Начнём с того что это не форма... Пока есть только один элемент с обработчиком... Никаких других элементов пока не наблюдается... И как они появляются так же не понятно...
При таком назначении обработчика он ну никак больше нигде не появится...
Дело в том что даже алерт не работает, для новых форм.
Весь скрипт таков
$(document).ready(function(){
   // Добовление формы еще

   // Кнопка
   var more_form = $('.more_item');
   // Колличество форм уже существующих - номера форм
   var n = 2;
   // То что нужно заменить в форме чтоб она отсылала нужные пост данные
   var regN_g = /<span class="number_question">2/g;
   var regN_i = /TestQuestion\[2\]/g;
   
   // Функция при клике на кнопку добовления форм еще
   more_form.click(function(){



        // В цикле добовляем еще 2 формы
        for(var i = 1; i <= 2; i++) {
                
           // Заносим в переменную форму для клонирования
           var item_form = $('.question_item:last');
           var html_form = item_form.html();      
           
           n++;
           // Формеруем замену
           namb = '<span class="number_question">' + n;
           form_i = 'TestQuestion[' + n + ']';
           // Заменяем
           html_form = html_form.replace(regN_i,form_i); 
           html_form = html_form.replace(regN_g,namb); 
           
            //alert(html_form);
            // Добовляем форму в конец
            more_form.before(html_form);

            
        }
   });
   
           // Ответы еще
           // Кнопка
           var more_answer = $('.more_answer');
           // Колличество форм уже существующих - номера форм
           var m = 5;
           // То что нужно заменить в форме чтоб она отсылала нужные пост данные
           var regN_a = /class="number_answer">#1/g;
           var regN_if = /\[answer\]\[1\]/g;
           
           
           // Функция при клике на кнопку добовления форм еще
           more_answer.click(function(){
            
            // Заносим в переменную форму для клонирования
           var item_form_a = $(this).next('.item_answer');
           var html_form_a = item_form_a.html();
           
           
                 
           //alert(html_form_a);
           m++;
           // Формеруем замену
           namb_a = 'class="number_question">#' + m;
           form_i_a = '[answer][' + m + ']';
           // Заменяем
           html_form_a = html_form_a.replace(regN_if,form_i_a); 
           html_form_a = html_form_a.replace(regN_a,namb_a); 
           //alert(html_form_a);

            // Добовляем форму в конец
            var else_a = $(this).nextAll('.else');
            else_a.before(html_form_a);

            
        
        
   });
    
    


}); //Конец ready

а вот весь HTML страницы
<div id="content">
		<script type="text/javascript" src="/css/form_question.js"></script>
<h1>Создание вопросов для теста</h1>

<div class="form">

<form id="test-question-form" action="/admin/testquestion/create/id/61" method="post">	        <div  class="question_item"><div  class="question_item">
    <hr />
         <span class="number_question">1</span>
         
         <label for="TestQuestion_1_question" class="required">Вопрос <span class="required">*</span></label>    	<div class="row">
    		
    		<textarea rows="1" cols="20" name="TestQuestion[1][question]" id="TestQuestion_1_question"></textarea>    		    	</div>
        
            <div class="more_answer" >

            Добавить еще ответы
            </div>
                    <div class="item_answer" ><div class="item_answer" >
                <span class="number_answer">#1</span><br />
                <textarea rows="1" cols="6" name="TestQuestion[1][answer][1][answer]" id="TestQuestion_1_answer_1_answer"></textarea>                <input id="ytTestQuestion_1_answer_1_true" type="hidden" value="0" name="TestQuestion[1][answer][1][true]" /><input name="TestQuestion[1][answer][1][true]" id="TestQuestion_1_answer_1_true" value="1" type="checkbox" />        		        	</div></div>
            
                <div class="item_answer" ><div class="item_answer" >
                <span class="number_answer">#2</span><br />

                <textarea rows="1" cols="6" name="TestQuestion[1][answer][2][answer]" id="TestQuestion_1_answer_2_answer"></textarea>                <input id="ytTestQuestion_1_answer_2_true" type="hidden" value="0" name="TestQuestion[1][answer][2][true]" /><input name="TestQuestion[1][answer][2][true]" id="TestQuestion_1_answer_2_true" value="1" type="checkbox" />        		        	</div></div>
            
                <div class="item_answer" ><div class="item_answer" >
                <span class="number_answer">#3</span><br />
                <textarea rows="1" cols="6" name="TestQuestion[1][answer][3][answer]" id="TestQuestion_1_answer_3_answer"></textarea>                <input id="ytTestQuestion_1_answer_3_true" type="hidden" value="0" name="TestQuestion[1][answer][3][true]" /><input name="TestQuestion[1][answer][3][true]" id="TestQuestion_1_answer_3_true" value="1" type="checkbox" />        		        	</div></div>
            
                <div class="item_answer" ><div class="item_answer" >

                <span class="number_answer">#4</span><br />
                <textarea rows="1" cols="6" name="TestQuestion[1][answer][4][answer]" id="TestQuestion_1_answer_4_answer"></textarea>                <input id="ytTestQuestion_1_answer_4_true" type="hidden" value="0" name="TestQuestion[1][answer][4][true]" /><input name="TestQuestion[1][answer][4][true]" id="TestQuestion_1_answer_4_true" value="1" type="checkbox" />        		        	</div></div>
            
                <div class="item_answer" ><div class="item_answer" >
                <span class="number_answer">#5</span><br />
                <textarea rows="1" cols="6" name="TestQuestion[1][answer][5][answer]" id="TestQuestion_1_answer_5_answer"></textarea>                <input id="ytTestQuestion_1_answer_5_true" type="hidden" value="0" name="TestQuestion[1][answer][5][true]" /><input name="TestQuestion[1][answer][5][true]" id="TestQuestion_1_answer_5_true" value="1" type="checkbox" />        		        	</div></div>

            
                <div class="else"></div>
    </div></div>
    <div  class="question_item"><div  class="question_item">
    <hr />
         <span class="number_question">2</span>
         
         <label for="TestQuestion_2_question" class="required">Вопрос <span class="required">*</span></label>    	<div class="row">
    		
    		<textarea rows="1" cols="20" name="TestQuestion[2][question]" id="TestQuestion_2_question"></textarea>    		    	</div>

        
            <div class="more_answer" >
            Добавить еще ответы
            </div>
                    <div class="item_answer" ><div class="item_answer" >
                <span class="number_answer">#1</span><br />
                <textarea rows="1" cols="6" name="TestQuestion[2][answer][1][answer]" id="TestQuestion_2_answer_1_answer"></textarea>                <input id="ytTestQuestion_2_answer_1_true" type="hidden" value="0" name="TestQuestion[2][answer][1][true]" /><input name="TestQuestion[2][answer][1][true]" id="TestQuestion_2_answer_1_true" value="1" type="checkbox" />        		        	</div></div>
            
                <div class="item_answer" ><div class="item_answer" >

                <span class="number_answer">#2</span><br />
                <textarea rows="1" cols="6" name="TestQuestion[2][answer][2][answer]" id="TestQuestion_2_answer_2_answer"></textarea>                <input id="ytTestQuestion_2_answer_2_true" type="hidden" value="0" name="TestQuestion[2][answer][2][true]" /><input name="TestQuestion[2][answer][2][true]" id="TestQuestion_2_answer_2_true" value="1" type="checkbox" />        		        	</div></div>
            
                <div class="item_answer" ><div class="item_answer" >
                <span class="number_answer">#3</span><br />
                <textarea rows="1" cols="6" name="TestQuestion[2][answer][3][answer]" id="TestQuestion_2_answer_3_answer"></textarea>                <input id="ytTestQuestion_2_answer_3_true" type="hidden" value="0" name="TestQuestion[2][answer][3][true]" /><input name="TestQuestion[2][answer][3][true]" id="TestQuestion_2_answer_3_true" value="1" type="checkbox" />        		        	</div></div>

            
                <div class="item_answer" ><div class="item_answer" >
                <span class="number_answer">#4</span><br />
                <textarea rows="1" cols="6" name="TestQuestion[2][answer][4][answer]" id="TestQuestion_2_answer_4_answer"></textarea>                <input id="ytTestQuestion_2_answer_4_true" type="hidden" value="0" name="TestQuestion[2][answer][4][true]" /><input name="TestQuestion[2][answer][4][true]" id="TestQuestion_2_answer_4_true" value="1" type="checkbox" />        		        	</div></div>
            
                <div class="item_answer" ><div class="item_answer" >
                <span class="number_answer">#5</span><br />
                <textarea rows="1" cols="6" name="TestQuestion[2][answer][5][answer]" id="TestQuestion_2_answer_5_answer"></textarea>                <input id="ytTestQuestion_2_answer_5_true" type="hidden" value="0" name="TestQuestion[2][answer][5][true]" /><input name="TestQuestion[2][answer][5][true]" id="TestQuestion_2_answer_5_true" value="1" type="checkbox" />        		        	</div></div>

            <div class="else"></div>
    </div></div>
<div class="more_item">
<br clear="all"/>
<p>Еще формы</p>
</div>
	<div class="row buttons">
        <input type="submit" name="yt0" value="Сохранить" />	</div>
</form>
</div>
</div>

Я просто не хотел выкладвать кучу кода, а показать суть))
Ответить с цитированием
  #6 (permalink)  
Старый 04.11.2011, 12:04
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от Kuklavod
Я просто не хотел выкладвать кучу кода, а показать суть
Нужно просто сделать тестовый пример, который проиллюстрирует проблему. А весь говнокод точно никому не нужен...
Ответить с цитированием
  #7 (permalink)  
Старый 04.11.2011, 12:46
Интересующийся
Отправить личное сообщение для Kuklavod Посмотреть профиль Найти все сообщения от Kuklavod
 
Регистрация: 01.11.2011
Сообщений: 14

Извеняюсь. Вот я выложил все в архиве, посмотрите пожалуйста http://narod.ru/disk/30482717001/с...ов.rar.html
Ответить с цитированием
  #8 (permalink)  
Старый 04.11.2011, 13:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Kuklavod, я архивы не качаю... Но рассмотрю простенький пример который можно выложить прямо тут. И даже запустить на исполнение...

Как делать примеры я тебе уже показывал в ответах на твои же сообщения... Т.ч. дерзай!
Ответить с цитированием
  #9 (permalink)  
Старый 04.11.2011, 13:11
Интересующийся
Отправить личное сообщение для Kuklavod Посмотреть профиль Найти все сообщения от Kuklavod
 
Регистрация: 01.11.2011
Сообщений: 14

Кажется я уже нашел ответ))
вместо
more_answer.click(function(){
Нужно использовать
more_answer.live('click', function(){
или же обработчик событий .delegate()
Сейчас уже вновь созданные кнопки с этим обработчиком работают))
Ответить с цитированием
  #10 (permalink)  
Старый 04.11.2011, 13:16
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Значит таки внял...
Сообщение от ksa
При таком назначении обработчика он ну никак больше нигде не появится...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кто нибудь делал такое? Mukhtar jQuery 3 23.11.2010 15:15
Ищу меню, помогите кто знает. McLotos Элементы интерфейса 2 18.11.2010 06:48
Как сделать так, чтобы JS при нажатии на кнопку не выполняла запрос со страницы. JSProgrammer Элементы интерфейса 3 18.05.2010 20:18
jQuery не так работает на сервере dial jQuery 2 19.11.2009 15:19
Можно ли сделать так... Абум Общие вопросы Javascript 1 04.07.2009 18:49