Javascript 仅在放置在 HTML 下方时才有效

Question

我找不到解决我遇到的以下问题的方法。 我正在使用一些 javascript 代码来使我的（实时）搜索工作（通过 ajax）。 问题是 Javascript 仅在我将其放置在 HTML 下方时才有效：

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

Javascript

$("#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'; 
}
 }));

将 Javascript 放在 HTML 前面时如何使其工作？

Answer 1

这是因为当 JavaScript 位于顶部时，您所指的 HTML 尚不存在。

将您的代码包装在$( document ).ready() 。 这使浏览器在触发 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() ？

Answer 2

如果你把它放在 HTML 之前，那么你试图将提交事件添加到一个在 JavaScript 运行时不存在的表单中。

将脚本包装在一个函数中，然后将该函数用作 ready 或 load 事件的事件处理程序。

将函数（而不是选择器、DOM 元素或强 HTML）作为参数传递给jQuery将绑定为就绪处理程序。

jQuery(bind_form_event_handler);

function bind_form_event_handler() {
    $("#filter").submit(function(event) {
    // etc etc
}

Answer 3

将您的 javascript 更改为此

用 $(function(){} 包裹

像这样

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

    })