3

申し訳ありませんが、これはおそらく初歩的な質問です。SO (または他の場所!) で、問題の原因や役立つ情報を見つけることができませんでした。

私は新しく習得した Jquery スキル (?) を小さな連絡先リストのデモ プロジェクトで練習しています。このデモ プロジェクトには、基本的にテーブルとそれに入力するための簡単なフォームが含まれています。このプロジェクトには、HTML ファイル、CSS スタイルシート、およびいくつかの Javascript と Jquery マジックが .JS ファイルに含まれています。

編集:これは、私が作成したjsFiddleです。

デフォルトでは、ページが最初に読み込まれるとき、テーブルは空で、プレースホルダー テキストが表示されます。

<table>
    <thead>
    <tr>
        <th id="col_lastName">Last Name</th>
        <th id="col_firstName">First Name</th>
        <th id="col_email">E-Mail</th>
        <th id="col_mobile">Mobile</th>
        <th id="col_actions">Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr id="placeholder">
        <td colspan="5">No contacts yet. Feel free to add your friends!</td>
    </tr>
    </tbody>
</table>

フォームの送信時に、Jquery を使用してプレースホルダーを非表示に設定し、新しいテーブル行を追加します。

$("tbody").append(
    "<tr><td>" +  $("#last_name").val() +
    "</td><td>" + $("#first_name").val() +
    "</td><td><a href='mailto:" + $("#email").val() + "'>" + $("#email").val() + "</a>" +
    "</td><td>" + $("#mobile").val() +
    "</td><td><p class='remove_link'>Remove</p></td></tr>");

現在の行を削除するためのリンクを含めたいので、<p class="remove_link">"Remove"</p>フォームの送信時に追加された文字列の一部であるテキストをクリックするとトリガーされる関数を作成しました。ただし、Jqueryでクリック可能にできないようです。私はこれを書きました:

$(".remove_link").click(function(){
    // just for chaecking the selector is ok
    console.log("remove clicked"); 
});

しかし、実際のページでは、「削除」はまったくクリックできません。

クラスがデフォルトの HTML に表示されず、追加されたコードでのみ宣言されているという事実と関係がありますか?

もちろん、構文が間違っていることも意味している可能性がありますが、これを理解することはできません!

4

2 に答える 2