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

集成两个javascript脚本并以不同方式处理用户事件

jquery javascript

user213154 · 技术社区 · 16 年前

$(function()
{
  $('#txtSearch').chainSelect('#link_id','http://localhost/example.com/combobox.php',
  { 
     before:function (target) //before request hide the target combobox and display the loading message
  {  
    $("#loading").css("display","block");
    $(target).css("display","inline");
 },
    after:function (target) //after request show the target combobox and hide the loading message
 { 
     $("#loading").css("display","none");
     $(target).css("display","inline");
     }
   });
  });
// form code
<td><div><input type="text" id="txtSearch" name="cat_name" onkeyup="searchSuggest();" autocomplete="off" class="inputbox ajax" value="" /></div></td>
<td><div><select name="link_id" id="link_id" class="inputbox select"><option value="">All Courses</option></select></div>

第一个输入使用ajaxsuggest类型的行为,当用户开始键入时,该行为从数据库(使用php)中提取类别列表。用户单击其中一个CAT,输入将被单击的文本填充。接下来是一个课程选择列表,当用户选择第一个输入时,也会从数据库中提取该列表。

这是Ajax代码的一部分-在1个外部文件中:

 function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
       var ss = document.getElementById('search_suggest')
       ss.innerHTML = '';
       var str = searchReq.responseText.split("\n");
       for(i=0; i < str.length - 1; i++) {
      //Build our element string.  This is cleaner using the DOM, but
      //IE doesn't support dynamically added attributes.
      var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
      suggest += 'onmouseout="javascript:suggestOut(this);" ';
      suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
      suggest += 'class="suggest_link" id="suggestTrigger">' + str[i] + '</div>';
      ss.innerHTML += suggest;
    }
  }
 }
    //Click function
    function setSearch(value) {
      document.getElementById('txtSearch').value = value;
      document.getElementById('search_suggest').innerHTML = '';
    }

它创建了一个用猫名填充的div。

相关的select list jquery代码如下-在第二个外部文件中:

    jQuery.fn.chainSelect = function( target, url, settings ) 
    {
      return this.each( function()
      {
        $(this).change( function( ) 
        {
           // more code here
        });
     });
   };

如您所见,选择列表是在发生更改事件时从数据库中提取的。由于用户在div中单击,并且没有真正创建对输入文本的更改,因此目前这种方法不起作用。应该触发选择的事件是建议框div的onclick。但它已经有一个名为setSearch()的函数。如何在div建议框(在ajax代码中)的onclick事件上激活jquery函数,而不是像现在这样在建议输入框(#txtSearch)的change事件上激活jquery函数?

1 回复 | 直到 12 年前

Tom Bartel 16 年前

根据您所写的内容,我假设建议框添加在同样包含文本字段的div中,对吗?如果是这样的话,这本可以说得更清楚。将事件放入搜索建议的一种方法可能是(将其放入初始化代码中,并在建议列表中省略onclick处理程序):

$('#search_suggest div').live('click', function(e) {
    var element = $(e.target);
    setSearch($(this).html());
});

您还可以通过这种方式向“建议”框添加更多事件。使用$(e.target)找出事件发生在哪个元素上,如上所示。顺便说一句,请省略像onclick这样的处理程序属性中的“javascript:”,这是不必要的。希望这能让你走上正轨。

汤姆