Javascript only below working

Question

저는 javascript에 익숙하지 않고 다음과 같은 문제에 대한 해결책을 찾을 수 없습니다. 내 (라이브) 검색 작업을 만들기 위해 자바 스크립트 코드를 사용하고 있습니다 (아약스를 통해).

<form action="filter.php" name="filter" method="get" id="filter"> 
<input type="text" id="search_bar" name="s" placeholder="Type hier je zoekterm..." /> 
</form>  
<ul id="result"></ul> 

자바 스크립트 나는 누군가가 나를 내가 전에 넣어 때 내 자바 스크립트 코드도 작동하는 데 도움 수 있기를 바랍니다

$("#filter").submit(function(event) { 
event.preventDefault(); 
$("#result").html(''); 
var values = $(this).serialize(); 
$.ajax({   
    url: "tracks_content.php", 
    type: "get", 
    data: values, 
    success: function(data){ 
     $('#result').html(data); 
    }, 
}); 
}); 

$(this).mouseup(function() { 
document.getElementById('result').style.display='none'; 
}); 

$("#result").mouseup(function(){ 
return false; 
});  

$("#filter").bind('input',(function(event){ 
var query = document.getElementById('search_bar').value; 
if(query!=""){ 
    $("#filter").submit(); 
    document.getElementById('result').style.display='block'; 
} 
else{ 
    $('#result').html(''); 
    document.getElementById('result').style.display='none'; 
} 
})); 

: 문제는 내가 HTML 아래에 넣으면 자바 스크립트에만 작동한다는 것입니다 HTML. 미리 감사드립니다!

Answer 1

이것은 JavaScript가 맨 위에있을 때 아직 존재하지 않는 HTML을 언급하기 때문입니다.

코드를 $(document).ready()에 입력하십시오. Thi는 JavScript를 실행하기 전에 DOM이로드 될 때까지 브라우저를 기다립니다.

$(document).ready(function() { 
    $("#filter").submit(function(event) { 
    event.preventDefault(); 
    $("#result").html(''); 
    var values = $(this).serialize(); 
    $.ajax({   
     url: "tracks_content.php", 
     type: "get", 
     data: values, 
     success: function(data){ 
      $('#result').html(data); 
     }, 
    }); 
    }); 

    $(this).mouseup(function() { 
    document.getElementById('result').style.display='none'; 
    }); 

    $("#result").mouseup(function(){ 
    return false; 
    });  

    $("#filter").bind('input',(function(event){ 
    var query = document.getElementById('search_bar').value; 
    if(query!=""){ 
     $("#filter").submit(); 
     document.getElementById('result').style.display='block'; 
    } 
    else{ 
     $('#result').html(''); 
     document.getElementById('result').style.display='none'; 
    } 
    })); 
}); 

는 jQuery를 사용하면 사용할 수있을 때 참고로, 당신은 왜 document.getElementById()을 uisng하고 이미 사용하고 있습니까?

Answer 2

HTML 앞에 넣으면 JavaScript가 실행될 때 존재하지 않는 양식에 제출 이벤트를 추가하려고합니다.

함수에 스크립트를 래핑 한 다음 해당 함수를 준비 또는로드 이벤트의 이벤트 처리기로 사용하십시오.

jQuery의 인수로 함수 (선택기, DOM 요소 또는 강력한 HTML 대신)를 전달하면 준비 처리기로 바인딩됩니다.

Answer 3

변경 당신에게 $이

랩에 자바 스크립트 (함수() {}이

$(function(){ 
    $("#filter").submit(function(event) { 
    event.preventDefault(); 
    $("#result").html(''); 
    var values = $(this).serialize(); 
    $.ajax({   
     url: "tracks_content.php", 
     type: "get", 
     data: values, 
     success: function(data){ 
      $('#result').html(data); 
     }, 
    }); 
    }); 

    $(this).mouseup(function() { 
    document.getElementById('result').style.display='none'; 
    }); 

    $("#result").mouseup(function(){ 
    return false; 
    });  

    $("#filter").bind('input',(function(event){ 
    var query = document.getElementById('search_bar').value; 
    if(query!=""){ 
     $("#filter").submit(); 
     document.getElementById('result').style.display='block'; 
    } 
    else{ 
     $('#result').html(''); 
     document.getElementById('result').style.display='none'; 
    } 
    })); 

    })