Интегрировать два сценария JavaScript и по-разному обрабатывать пользовательские события

Question

Я создаю форму поиска, в которой используются два разных сценария JavaScript. Это код формы:

$(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>

В первом входе используется тип предложения Ajax, который извлекает список категорий из базы данных (с php), когда пользователь начинает печатать. Пользователи нажимают на одну из кошек, и ввод заполнен нажатием на текст. Далее идет список выбранных курсов, который также извлекается из базы данных, когда пользователь выбирает первый вход.

Это часть кода 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, который заполнен именами кошек.

Соответствующий JQuery код списка выбора - во втором внешнем файле:

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

Как видите, список выбора извлекается из базы данных в случае события изменения. Это не очень хорошо работает в данный момент, так как пользователь нажимает на элемент div и не вносит изменения в текст ввода. Событие, которое должно вызвать выбор, - это щелчок элемента div окна предложения. Но у него уже есть функция setSearch (). Как активировать функцию jquery в событии onclick окна предложения div (в коде ajax) вместо события изменения поля ввода ввода предложений (#txtSearch), как сейчас?

Answer 1

из того, что вы пишете, я предполагаю, что поле подсказки добавляется в тот же div, который также содержит текстовое поле, это правильно? Если так, то это можно было бы сформулировать более четко. Один из способов добавить это событие в предложения поиска (добавить его в код инициализации и пропустить обработчики onclick в списке предложений):

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

Таким же образом вы можете добавить больше событий в поле подсказки. Узнайте, с каким элементом произошло событие, используя $ (e.target), как показано выше. Кстати, пожалуйста, опустите «javascript:» в атрибутах обработчиков, таких как onclick, это не обязательно. Надеюсь, это поможет вам.

Tom