javascript - 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
    });
});