是什么导致这个JavaScript代码以它的方式运行？

我知道stackoverflow往往会回避“文本墙”的post，但我已经在这里呆了大约4个小时，我无法弄明白，所以我想尽可能多地提供信息。

我有一个页面，上面有两个输入表格。 每当我在第一个文本中添加文本时， 附加到第二个输入按钮的javascript函数就会运行，我无法找出原因。

在我的标题中，我有两个脚本：

其中包含：

 function autocomplet() { var min_length = 0; // min caracters to display the autocomplete var keyword = $('#country_id').val(); if (keyword.length >= min_length) { $.ajax({ url: 'capoInstantSearch.php', type: 'POST', data: {keyword:keyword}, success:function(data){ $('#country_list_id').show(); $('#country_list_id').html(data); } }); } else { $('#country_list_id').hide(); } } // set_item : this function will be executed when we select an item function set_item(item) { // change input value $('#country_id').val(item); // hide proposition list $('#country_list_id').hide(); $("#capoInfo").load("capoSingleReturn.php?q="+encodeURIComponent(item)); } 

capoInstantSearch.php看起来像这样：

 prepare($sql); $query->bindParam(':keyword', $keyword, PDO::PARAM_STR); $query->execute(); $list = $query->fetchAll(); foreach ($list as $rs) { // put in bold the written text $country_name = str_replace(strtoupper($_POST['keyword']), ''.$_POST['keyword'].'', $rs['quotePartNumber']); // add new option echo '
'.$country_name.'
'; } ?> 

和

其中包含：

 function compCheck() { var min_length = 0; // min caracters to display the autocomplete var bootyTime = $('#comp_id').val(); if (bootyTime.length >= min_length) { $.ajax({ url: 'capoInstantCompSearch.php', type: 'POST', data: {bootyTime:bootyTime}, success:function(data){ $('#comp_list_id').show(); $('#comp_list_id').html(data); } }); } else { $('#comp_list_id').hide(); } } // set_item : this function will be executed when we select an item function set_item(item) { // change input value $('#comp_id').val(item); // hide proposition list $('#comp_list_id').hide(); $("#compReturn").load("capoCompReturn.php?w="+encodeURIComponent(item)); } 

输入框1：

输入框2：

最终，autocomplet（）的内容应该放在这个div中

而compCheck（）的内容应放入

当我在第一个输入框中键入文本时，它会填充

country_list_id，当我做出选择时，它会将该答案填充到我页面上的第二个输入框中，然后执行该代码。 我无法弄清楚为什么这样做，这让我发疯了……

Answer 1

这是因为你有两个全局范围的函数叫做“set_item”

Answer 2

您正在全局范围内定义函数，第二个是覆盖第一个函数。 你可以通过命名空间（缺少一个更好的术语）来解决这个问题，方法是将它们粘贴到一个对象中。

例如，

的script.js

 var country = { autocomplete: function() { var min_length = 0; // min caracters to display the autocomplete var keyword = $('#country_id').val(); if (keyword.length >= min_length) { $.ajax({ url: 'capoInstantSearch.php', type: 'POST', data: {keyword:keyword}, success:function(data){ $('#country_list_id').show(); $('#country_list_id').html(data); } }); } else { $('#country_list_id').hide(); } }, // set_item : this function will be executed when we select an item set_item: function(item) { // change input value $('#country_id').val(item); // hide proposition list $('#country_list_id').hide(); $("#capoInfo").load("capoSingleReturn.php?q="+encodeURIComponent(item)); } } 

script2.js

 var comp = { compCheck: function() { var min_length = 0; // min caracters to display the autocomplete var bootyTime = $('#comp_id').val(); if (bootyTime.length >= min_length) { $.ajax({ url: 'capoInstantCompSearch.php', type: 'POST', data: {bootyTime:bootyTime}, success:function(data){ $('#comp_list_id').show(); $('#comp_list_id').html(data); } }); } else { $('#comp_list_id').hide(); } }, // set_item : this function will be executed when we select an item set_item: function(item) { // change input value $('#comp_id').val(item); // hide proposition list $('#comp_list_id').hide(); $("#compReturn").load("capoCompReturn.php?w="+encodeURIComponent(item)); } } 

然后更改HTML中的引用以包含命名空间，例如

输入框1 （注意onkeyup ）

然后重复所有其他引用，包括PHP代码中的引用。

您可能还想查看Browserify，它将Node的require模块语法带入浏览器。 另外，您可能会阅读JS中的闭包和IIFE。