Как сохранить функцию Jquery от перезаписи одного поля ввода с помощью onclick записи на второй ввод?

Question

У меня есть форма с двумя полями ввода и облако тегов.

Я хочу, чтобы пользователь поместил фокус в первый вход, затем щелкнул тег, таким образом запустив функцию jquery, которая помещает нажатый тег в первый вход. Затем пользователь фокусирует второй ввод, щелкает тег, запускающий аналогичную функцию jquery, чтобы поместить второй тег во второе поле ввода.

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

Я подозреваю, что мне нужна помощь с $ (this) .html или связыванием. Мне ясно, что функция $ ('a'). Click выполняется дважды с последним значением $ (this) .html ().

Как мне изолировать две функции, чтобы первый тег был записан на первый вход, а второй тег был записан только на второй вход?

Вот как я написал свои html и jquery:

Форма:

 <div id="content"> 
      <h3 class="replaceTag">Replace A Tag</h3>
    <p class="showToReplace">Replace 
          <input class="inputToReplace" type="text" name="" value=""> 
          With 
           <input class="inputWithReplace" type="text" name="" value=""> 
           <input type="button" name="" value="Go">
     </p> 

Структура облака тегов, для краткости отображается только буква "A".

 <div id="tagReference">  
     <div class="tagWindow">

         <h4 class="alphaLetter">A</h4>

             <div id="alphachunk">
                 <a class="_tag_suggestion">access, </a>
                 <a class="_tag_suggestion">accessibility,</a>
                 <a class="_tag_suggestion">accountant, </a>
                <a class="_tag_suggestion">acoustical,</a>

             </div>

         <h4 class="alphaLetter>B</h4>
              <div id="alphachunk">
                  <!--and so on for the alphabet-->
              </div>
      </div> 
  </div>

Это происходит для каждой буквы алфавита, для которой существует тег.

Вот jQuery

$(document).ready(function(){
    $('.inputToReplace').focus(function(){ 
     $("a").click(function(){  
         $('.inputToReplace').val($(this).html());
     });
    });

 $('.inputWithReplace').focus(function(){ 
        $("a").click(function(){  
         $('.inputWithReplace').val($(this).html()); 
             });  
  });
 });

Теперь прекрасный снимок экрана. альтернативный текст http://www.kevtrout.com/stackoverflowimages/editTagsScrn.png

Answer 1

Вы можете сократить свой код до

$(document).ready(function(){
  $('input:text').focus(function(e){ 
      tagSelector(e.target);
  });
});

function tagSelector(elem) {
  $("a").unbind('click').click(function(e){  
    $(elem).val($(e.target).text()); 
  });  
}

Возможно, вам придется использовать более конкретный селектор для входов, я оставлю это в качестве упражнения для вас, чтобы решить:)

EDIT:

или даже это

$(function(){
  $('input:text').focus(tagSelector);
});

function tagSelector(e) {
  $("a").unbind('click').click(function(){  
    $(e.target).val($(this).text()); 
  });  
}

Answer 2

jQuery позволяет связывать обработчики событий с несколькими нажатиями. Вам нужно будет отменить привязку предыдущего обработчика события нажатия, используя .unbind, прежде чем добавить второй (или оба будут срабатывать, как вы уже видели):

$("a").unbind("click");

Чтобы ваш код мог читать:

$('.inputWithReplace').focus(function(){ 
    $("a").unbind("click").click(function(){  
     $('.inputWithReplace').val($(this).html()); 
         });  
});