Javascript和HTML-變量不顯示

Question

我在HTML中有以下代碼片段：

 <form class="navbar-search pull-right search-query" value = "" action="/search/?q=" style="line-height:25px;">
    <input type="text" id="navbarsearch" class="search-query span2" style="border-radius:14px 14px 14px 14px;" name = "q" placeholder="Search">
      <i class="icon-search icon-white" onclick="document.forms.search.submit();"></i>
         &nbsp;&nbsp;&nbsp;
 </form>

我正嘗試按以下方式將此變量傳遞給Javascript，但由於某些我不認為的原因，查詢變量未正確傳遞。

<script type="text/javascript">
    $("#navbarsearch").click(function() {
        // This sends us an event every time a user clicks the button
        mixpanel.track('SearchQuery', {'query': document.getElementById('navbarsearch').value, 'url' : window.location.pathname});
    });
</script>

該操作顯示在MixPanel中，但查詢變量未顯示。 難道我做錯了什么？

Answer 1

您需要將其放在document.ready中：

$(function() {   //  <--- there.
    $("#navbarsearch").click(function() {
    mixpanel.track(
        'SearchQuery',
        {
            'query': $(this).val(),   
            'url' : window.location.pathname
        }
    );
});
});

Answer 2

當用戶用鼠標單擊時，單擊事件被關閉。 我想您想聽擊鍵嗎？

嘗試：

$("#navbarsearch").keydown(function() {
    mixpanel.track('SearchQuery', {
         'query': document.getElementById('navbarsearch').value,
         'url' : window.location.pathname
    });
});