代码之家 › 专栏 › 技术社区 › kevtrout

如何防止jquery函数用onclick写第二个输入覆盖一个输入字段?

html jquery javascript

kevtrout · 技术社区 · 16 年前

我有一个包含两个输入字段和一个标签云的表单。

我希望用户将焦点放在第一个输入中,然后单击一个标记,从而触发一个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

2 回复 | 直到 16 年前

Chris Van Opstal 16 年前

jquery允许您绑定多个单击事件处理程序。您需要使用取消绑定上一个单击事件处理程序 .unbind 在添加第二个(或两者都会触发,如您所体验的那样)之前:

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

因此您的代码可以读取:

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

Russ Cam 16 年前

您可以将代码缩短为

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