Javascript only only below

Question

我對javascript很陌生，無法找到解決以下問題的解決方案。我正在使用一段JavaScript代碼來完成我的（實時）搜索工作（通過ajax）。問題是，當我把它的HTML下面的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> 

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

僅供參考，你爲什麼uisng document.getElementById()當你擁有jQuery的提供給你，並且已經在使用它？

Answer 2

如果你在HTML之前放置了那個，那麼你正在試圖添加一個提交事件給一個在JavaScript運行時不存在的表單。

將腳本包裝在函數中，然後將該函數用作ready或load事件的事件處理函數。

將作爲參數jQuery的函數（而不是選擇器，DOM元素或HTML強）傳遞給ready處理程序。

jQuery(bind_form_event_handler); 

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

Answer 3

更改你JavaScript以這個

渦卷與$（函數（）{}

這樣

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

    })