如何保持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()); 
      }); 
    }); 
}); 

现在，一个可爱的屏幕截图。 alt text http://www.kevtrout.com/stackoverflowimages/editTagsScrn.png

Answer 1

jQuery允许您绑定多个单击事件处理程序。您需要添加第二个之前解除绑定使用.unbind以前的单击事件处理程序（或两者会火，因为你有经验）：

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

所以，你的代码能读：

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

Answer 2

你可以缩短你的代码

$(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()); 
    }); 
} 

您可能需要使用更具体的选择的输入，我会离开，作为一个练习你来决定:)

编辑：

甚至这个

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

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