1

ウェブサイトに検索バーを実装しようとしています。私はすでにバックエンド処理を正しく機能させており、検索バー用にhtmlとcssを配置しています。あとは、javascriptを取得して検索を実行するだけです。検索バーのHTMLは次のとおりです。

<div id="search_field_container">
    <input type="text" name="search_field" id="search_field" maxlength="100" placeholder="Search by item name or #tag" value="Search by item name or #tag" onclick="value=''" />
    <button id="search" name="search_button">s</button>
</div>

私がやろうとしているのは、ユーザーがテキストバーがフォーカスされているときにEnterキーを押すか、検索ボタンをクリックしたときに、検索と呼ばれるjavascript関数をトリガーするようにjqueryイベントハンドラーを設定することです。ただし、イベントハンドラーをトリガーさせることは絶対にできないようです。これが私のJavaScriptです：

//Search function
$(document).ready(function(){
    console.log("In anonymous function.");
    $("#search").on('click', function(event){
        alert("In click handler");
        search();
    });
});

$("#search_field").bind('keyup', function(event){
    alert("In keyup handler");
    if(event.keyCode == 13){
        alert("In enter handler");
        search();
    }
});

function search(){
    alert("Something happened!");
    var searchTerm = $("#search_field").val();
    alert("You're trying to search for "+searchTerm);
}

現在、テキストバーにカーソルを置いてEnterキーを押すか、検索ボタンを押しても何も起こりません。ページ上の他のすべてのjavascriptは完全に正常に実行されるため、すべての実行を妨げるjavascriptエラーではないことを私は知っています。

検索関数が機能し、少なくともsearch_fieldテキスト入力のIDが正しいことはわかっonclickています。これは、ボタンにを追加してそれを介して検索を呼び出すと、正しく実行され、テキストフィールドの値が常に正しくエコーされるためです。

検索バーは別のヘッダーファイルにあるので、すべてのページのhtmlに含める必要はありませんが、ファイルをPHPに含めているので、違いはありません。すでに配置されているはずです。ファイルがユーザーに届く前ですら。念のために言っておきますが、私はすでに試してみましたが、.bindご覧document.readyの.onとおり、匿名ラッパー関数も役に立ちませんでした。

コンソールなどにエラーメッセージが表示されません。ただ黙って失敗します。このサイトにも同様の質問がたくさんあることは知っていますが、私はすでに、見つけたすべての解決策を約12個まで試しました。問題が何であるか、それを修正する方法を誰かが知っている場合、またはこれが失敗する理由を理解するのに役立つ追加のテストでさえ、検索を絞り込むことができる場合は、それをいただければ幸いです。

編集：Huangismは私のコードを使用してこのJSfiddleを作成し、コードが正しく機能することを示したので、私のサイトのコンテキストに何かが原因で機能しなくなったに違いありません。

フィドル-http://jsfiddle.net/3m5Mp/

4

2 に答える 2

2

あなたの質問にフィドルを追加しました。#search_field ハンドラーを doc ready 内に移動する必要があります。フィドルでは、すでにドキュメントの準備ができていると想定しているため、機能します。フィドルでクリックが機能します。どのブラウザでテストしていますか?

入力用

code= (e.keyCode ? e.keyCode : e.which);
if (code == 13) alert('Enter key was pressed.');

別の質問からこれを得ました

これは、すべてのハンドラーがドキュメントの準備ができており、ドキュメントの準備ができていると想定していないハンドラーのフィドルです。

http://jsfiddle.net/PFcnx/2/

FF で動作するようです。他のブラウザでテストして動作を確認してください。

あなたのjsエラーは、おそらく末尾の余分なコンマと関係があります

  $("#grid").masonry({
    itemSelector : '.entry', 
    isFitWidth : 'true',
    isResizable : 'true',   
  });

最後の「true」の後のカンマを削除します

于 2012-10-05T14:31:14.697 に答える
1

event.which代わりに使用してください。私も 100% 確実ではありませんが、代わりに.keydownorを試してみてください。.keypress私のサイトでいくつかのJSコードを見ています。ここでは、Enterキーの押下をトラップしていますが、これら2つだけを使用しています。いくつかのことで苦労したことを覚えています.keyup。

于 2012-10-05T14:19:27.227 に答える