Два jquery подчинения, одно действие за

Question

Я очень новичок в JS/jquery (я разработчик backend), и у меня проблемы с реализацией. Я работаю с Django и имею шаблон, который имеет текстовую область, которая должна иметь событие отправки при нажатии кнопки enter. Вот как я это реализовал.

<div class="search multi-search"> 
    {% if search_str %} 
     <textarea name="search_str" id="search_str">{{ search_str }}</textarea> 
    {% else %} 
     <textarea name="search_str" id="search_str" placeholder="Search by Lead ID's or email addresses separated by a comma."></textarea> 
    {% endif %} 
     <button id="thebutton" type="submit" class="btn btn-icon btn-large btn-inverse"><i class="icon-search"></i></button> 
</div> 


<script> 
    // overriding the default enter action to submit the 
    // search string on enter instead 
    $('#search_str').keydown(function(e){ 
     // checks to see if the key pressed is the enter key and submit. 
     // (13 is the code for the enter key) 
     if (e.which == 13) { 
      e.preventDefault(); 
      $('#leads_form').submit(); 
     } 
    }) 
</script> 

Эта запись заполняет список, в котором пользователь может выбрать (через флажок) ряд предметов. Для них есть кнопка действия для изменения сведений о выбранных элементах. Когда они нажимают кнопку действия, появляется модальное окно с просьбой предоставить подробную информацию о запрошенных изменениях. Вот мой код для этой части.

<div id='give-reason' style="display: none"> 
    <p>Give your reason for this change.</p> 
    <form> 
     <input type="text" id="reason"> 
     <button type='button' id='reason-submit'>Submit your reason</button> 
    </form> 
</div> 

$('#reason-submit').submit(function(){ 
    var lead_data = gather_lead_status($(this), update_type, true); 
    var reason = $('#reason').val(); 
    lead_data(reason); 
    $.fancybox.close(); 
    e.preventDefault(); 
}); 

Это прекрасно работает, если я использую .click() для '#reason-submit' и пользователь нажимает кнопку отправки. Если я использую .submit(), он вообще не работает. Во-первых, если они нажимают кнопку отправки, никаких действий не происходит (не удивительно). Во-вторых, если они нажимают enter, страница обновляется - и все отображаемые данные исчезают.

Любые предложения о том, как я могу решить эту проблему?

EDIT 1: Я должен упомянуть, что я пытался использовать $(':focus') и, похоже, не может работать так. Я мог бы использовать его неправильно (не удивительно).

EDIT 2: Благодаря asifrc и niiru мне удалось получить эту работу правильно со следующим.

<div class="search multi-search"> 
    {% if search_str %} 
     <textarea name="search_str" id="search_str">{{ search_str }}</textarea> 
    {% else %} 
     <textarea name="search_str" id="search_str" placeholder="Search by Lead ID's or email addresses separated by a comma."></textarea> 
    {% endif %} 
    <button id="thebutton" type="submit" class="btn btn-icon btn-large btn-inverse"><i class="icon-search"></i></button> 
</div> 

<div id='give-reason' style="display: none"> 
    <p>Give your reason for this change.</p> 
    <form id='reason-submit'> 
     <input type="text" id="reason"> 
     <button type='submit'>Submit your reason</button> 
    </form> 
</div> 

<script> 
    // overriding the default enter action to submit the 
    // search string on enter instead 
    $('#search_str').keydown(function(e){ 
     // checks to see if the key pressed is the enter key and submit. 
     // (13 is the code for the enter key) 
     if (e.which == 13) { 
      e.preventDefault(); 
      $('#leads_form').submit(); 
     } 
    }) 

    $('#reason-submit').submit(function(e){ 
     e.preventDefault(); 
     var lead_data = gather_lead_status($(this), update_type, true); 
     var reason = $('#reason').val(); 
     lead_data(reason); 
     $.fancybox.close(); 
    }); 
</script> 

Answer 1

submit событие может быть переплетены только определенным типом элементов. Из API Документов Jquery http://api.jquery.com/submit/:

отправки события посылаются к элементу, когда пользователь пытается представить форму. Он может быть прикреплен только к элементам <form>. Формы могут быть отправлены , либо нажав явную, <input type="image">, либо <button type="submit">, либо нажав Enter , когда определенные элементы формы имеют фокус.

Так попробуйте изменить атрибут вашей кнопки, чтобы «представить» и посмотреть, если это работает type.

еще лучше, просто дайте тег формы идентификатор и попытайтесь подключиться к представить событие для этого ..

Позвольте мне знать, если это помогает :)

Answer 2

.click() работ по очевидным причинам. Но нажатие enter вызовет действие отправки, которое опубликует форму. Вместо этого измените тип своей кнопки для отправки и запретите действие по умолчанию для события отправки. Это поможет вам в любых действиях, которые могут вызвать отправку формы.

<div id='give-reason' style="display: none"> 
    <p>Give your reason for this change.</p> 
    <form> 
     <input type="text" id="reason"> 
     <button type='submit' id='reason-submit'>Submit your reason</button> 
    </form> 
</div> 

$('#reason-submit').submit(function(event){ 
    event.preventDefault(); 
    var lead_data = gather_lead_status($(this), update_type, true); 
    var reason = $('#reason').val(); 
    lead_data(reason); 
    $.fancybox.close(); 
    e.preventDefault(); 
});