0

コントローラーに ajax 呼び出しを行うビューに JavaScript があります。データをループして、テーブルを作成しています。私がする必要があるのは、テーブル内の各アイテムに対してハイパーリンクを作成し、ユーザーがいずれかのリンクをクリックしたときに、リンクの値をテキスト ボックスに入力することです。

これまでのところ、json データをループしてテーブルを作成するコードは機能しています。コードのスニペットを次に示します。

            htmlstring = htmlstring + "<th>VlanId</th><th>Name</th>";
    for(i = 0; i < returnDataFromController.length; i++) {
        //alert(returnDataFromController[i].VlanId);
        htmlstring = htmlstring +  "<tr><td><a href=''>"+returnDataFromController[i].VlanId+"</a></td><td>"+ returnDataFromController[i].Name+"</td></tr>";          
    }
    submitFormHTML = "<input type='text' id='newVlanID' style='width:5em;height:1.5em'/>&nbsp;&nbsp;<button class='btn' id='saveVlan' style='width:10em;height:2em'>Reassign Vlan</button>";
    $('#clientajaxcontainer').html(htmlstring);
    $('#newvlanform').html(submitFormHTML);

やりたいことを達成するために、各タグに一意の名前を付ける必要がありますか、それともクラスに割り当てるだけでよいですか? すべてのタグに特定のクラス (例) classX を割り当ててから、classX タイプのタグのクリック イベント用の jquery ハンドラを記述できればよいのですが。これは可能ですか？この投稿を読んでいただきありがとうございます。

編集：

jquery バージョン 1.8 を使用しています。上記のコードに加えて、クリック イベントに基づいてテキスト ボックスを自動入力するように、さらに JavaScript を追加しました。

 $('clientajaxcontainer').on("click", "td:first-child a", function(ev) {
  ev.preventDefault();
  $('#newVlanID').val($(this).text());
  });

私が正しく理解していれば、 ev.preventDefault() はブラウザが別のページにリダイレクトするのを止めるはずです。しかし、それは機能していないようです。ハイパーリンクをクリックすると、現在のページがリロードされます。

4

2 に答える 2

1

デリゲート バージョンの.on()を使用し、クリック ハンドラーを ajax コンテナーに追加します。

$("#clientajaxcontainer").on("click", "td:first-child a", function(ev) {
    ev.preventDefault();

    $("#newVlanID").val($(this).text());
});

別の質問の例ですが、リンクタグがないだけで、このソリューションに本当に近いです:)

編集1.7 未満の jQuery バージョンでは、代わりに.delegate()
を使用できます

$("#clientajaxcontainer").delegate("td:first-child a", "click", function(ev) {
    ev.preventDefault();

    $("#newVlanID").val($(this).text());
});
于 2012-09-05T19:15:02.767 に答える
0

リンクを HTML 文字列として作成するのではなく、jQuery 要素として作成するので、リンクにクリック リスナーを割り当てることができます。

var link = $("<a href=#>"+ yourVar +"</a>");
link.click(function(){
  alert("Do something with "+ $(this).html());
  return false;
});
$(yourDomElement).append(link);
于 2012-09-05T19:14:50.427 に答える