为什么这个警报被触发三次而不是一次

在这个jsBin文件中，一个警报（它只是显示'已触发'）被称为三次。为什么这个警报被触发三次而不是一次

应该，因为它只是加入只是调用一次：

.data("autocomplete")._renderItem = function(ul, item) {

这里是bin文件： http://jsbin.com/welcome/55641/edit

如何可以将代码进行修改，以使警报刚刚解雇一次？

整个代码：

<!doctype html> 

<html lang="en"> 
<head> 

<style type="text/css"> 
     fieldset {width: 60%; margin: 0 auto;} 
     div.row {clear: both;} 
     div.row label {float: left; width: 60%;} 
     div.row span {float: right; width: 35%;} 
    </style> 


    <meta charset="utf-8" /> 
    <title>jQuery UI Autocomplete - Custom data and display</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 

    <style> 
    #project-label { 
     display: block; 
     font-weight: bold; 
     margin-bottom: 1em; 
    } 
    #project-icon { 
     float: left; 
     height: 32px; 
     width: 32px; 
    } 
    #project-description { 
     margin: 0; 
     padding: 0; 
    } 
    </style> 

    <script> 
    $(function() { 
     var projects = [ 
      { 
       value: "jquery", 
       label: "jQuery", 
       desc: "the write less, do more, JavaScript library", 
       icon: "jquery_32x32.png" 
      }, 
      { 
       value: "jquery-ui", 
       label: "jQuery UI", 
       desc: "the official user interface library for jQuery", 
       icon: "jqueryui_32x32.png" 
      }, 
      { 
       value: "sizzlejs", 
       label: "Sizzle JS", 
       desc: "a pure-JavaScript CSS selector engine", 
       icon: "sizzlejs_32x32.png" 
      } 
     ]; 

     $("#project").autocomplete({ 
      minLength: 0, 
      source: projects, 
      focus: function(event, ui) { 
       $("#project").val(ui.item.label); 
       return false; 
      }, 
      select: function(event, ui) { 
       $("#project").val(ui.item.label); 
       $("#project-id").val(ui.item.value); 
       $("#project-description").html(ui.item.desc); 
       $("#project-icon").attr("src", "images/" + ui.item.icon); 

       return false; 
      } 
     }) 
     .data("autocomplete")._renderItem = function(ul, item) { 
      alert('fired'); 
      return $("#suggestionsDiv").append("<div class='row'> <label for='first-field'>The first field</label><span><input type=text id='first-field' size='15' /></span></div>"); 
     }; 

    }); 



    </script> 
</head> 
<body> 

<div id="project-label">Select a project (type "j" for a start):</div> 
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" /> 
<input id="project" /> 
<input type="hidden" id="project-id" /> 
<p id="project-description"></p> 



    <fieldset> 

      <legend>Suggestions</legend> 

    <div id ="suggestionsDiv"> 
      <div class="row"> 
       <label for="first-field">The first field</label> 
       <span><input type="text" id="first-field" size="15" /></span> 
      </div> 
      <div class="row"> 
       <label for="second-field">The second field with a longer label</label> 
       <span><input type="text" id="second-field" size="10" /></span> 
      </div> 
      <div class="row"> 
       <label for="third-field">The third field</label> 
       <span><input type="text" id="third-field" size="5" /></span> 
      </div> 
    </div> 
    </fieldset> 

</body> 
</html>

来源

2012-11-30 blue-sky

我不明白，你是否把你的整个自动完成的东西变成了函数表达式？ – adeneo

每个渲染项目都会正确触发一次事件。混淆在哪里？ –

当你的建议在字段中键入j，返回三个项目。对于每个项目，正在调用_renderItem方法来渲染每个项目，从而产生三个警报。它按预期工作。

来源

2012-11-30 23:09:00

我打算发表一个类似的答案，你是对的，作为一个测试，如果你输入's'它只会触发一次，因为只有一个项目返回（Sizzle JS） – Nelson

为什么这个警报被触发三次而不是一次

回答

相关问题