두 개의 자바 스크립트를 통합하고 사용자 이벤트를 다르게 처리하십시오.

Question

두 개의 다른 자바 스크립트를 사용하는 검색 양식을 작성하고 있습니다.

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

.

관련 선택 목록 jQuery 코드는 이것이다 - 제 2의 외부 파일에 :

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

당신이 선택 목록이 변경 이벤트의 경우 데이터베이스에서 가져 볼 수 있듯이. 사용자가 div를 클릭하고 입력 텍스트를 실제로 변경하지 않았기 때문에 이것은 현재 잘 작동하지 않습니다. 선택을 트리거해야하는 이벤트는 제안 상자의 div의 onclick입니다. 하지만 이미 setSearch()라는 함수가 있습니다. 제안 입력 상자 (#txtSearch)의 변경 이벤트가 아닌 div 제안 상자 (ajax 코드)의 onclick 이벤트에서 jquery 함수를 활성화하는 방법은 무엇입니까?

Answer 1

당신이 쓴 글에서 제안 상자가 텍스트 필드를 포함하고있는 동일한 div 안에 추가되었다고 가정합니다. 그게 맞습니까? 그렇다면 더 명확하게 기술되었을 수 있습니다. 한 가지 방법은 수 (제안 목록에서 온 클릭 핸들러를 초기화 코드에 넣어 및 생략) 수있는 검색 제안의 이벤트를 넣어 :

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

당신은 또한 제안 상자에이 방법을 더 많은 이벤트를 추가 할 수 있습니다. 위에 표시된 것처럼 $ (e.target)을 사용하여 이벤트가 발생한 요소를 확인하십시오. 그런데 onclick과 같은 핸들러 속성에서 "javascript :"를 생략하십시오. 꼭 필요한 것은 아닙니다. 희망이 당신을 추적합니다.

톰