0

コンテキストは次のとおりです。

サーバー上にあるいくつかの xml ドキュメントをユーザーが管理できるようにする .aspx ページを作成しています。ページ コンテンツは AJAX を使用して読み込まれるため、ボタンとフォームはドキュメントに動的に追加されます。

クライアントのマシンに読み込まれる前に .aspx ページ内に作成していた静的ボタンがあれば、非常に簡単にイベントを関連付けることができました。ただし、jQuery を使用して、その場でボタンとフォームを動的に追加および削除しています。

簡単な例を次に示します。

次の jsFiddle では、html ドキュメントに次のスクリプトが含まれているふりをしています。

<script language="C#" type="text/C#" runat="server">
void SaveAllChanges(Object sender, EventArgs e)
{
    Button clickedButton = (Button)sender;
    clickedButton.Text = "foobar";
}
</script>

そして、次を含むjavascriptファイルがあります。

$('button.buttonGenerator').click(function() {

    $('.buttonContainer').append(
        '<button onclick="SaveAllChanges">' +
        'Save All Changes!' +
        '</button>'
    );

});

明らかに、私が作成しているボタンは、現在の方法で関数 SaveAllChanges を実行できません。onclick 属性を追加して、何が必要かを疑似コードのようなスタイルで示しました。

動的に追加されたボタンが、ドキュメントの上部にある script タグ内で定義した C# メソッドを実行できるようにするにはどうすればよいですか?

これがjsfiddleです：http://jsfiddle.net/2XwRJ/

ありがとう。

4

3 に答える 3

1

変更を保存する必要のあるすべてのボタンに共通のクラス（例：class = "ajaxButton"）を指定し、そのクラスに一致する要素のクリックイベントに応答する1つのjQueryメソッドを設定できます（DOMの更新が反映されるようにライブを使用します）。

$("button.ajaxButton").live("click", function(){
  // Perform your Ajax callback to run server-side code
});
于 2012-08-10T20:21:07.283 に答える
1

あなたがする必要があるのは..のようなものを使うことです。

$(document).ready(function() {
  $('button.buttonGenerator').click(function() {
    $('.buttonContainer').append(
        '<button id="#dynamicCommentButton" onclick="SaveAllChanges">' +
        'Save All Changes!' +
        '</button>'
    );
  });
  $(document).on('click', '#dynamicCommentButton', function() {
    alert($(this).attr('id'));
  });
});
于 2012-08-10T20:23:28.480 に答える
1

onclickこのコードは HTML DOM 要素としてボタンを追加するだけであり、属性はクライアント要素にあるため、そこにあるようにボタンを追加することはできません。その結果、ボタンをクリックすると、SaveAllChangesjavascript 関数を起動しようとします。

$('.buttonContainer').append(
        '<button onclick="SaveAllChanges">' +
        'Save All Changes!' +
        '</button>'
 );

SaveAllChangesその関数をjavascriptで作成し、そこから処理できるようにするのが最善でしょう。あなたがこれを行うことができる2つの方法は次のとおりです。

  1. JavaScript から Ajax を使用して呼び出す http エンドポイントのセットアップ (スクリプト サービス、Web API、またはページへの投稿のみ) を用意します。その後、必要な引数を渡すことができます。
  2. ページに非表示の要素と非表示のボタンを配置して、JavaScript が呼び出されたときに必要な引数を設定し、非表示のボタンをクリックしてページをポストバックすることができます。

個人的には、ページが毎回ポストバックされるわけではないため、ユーザー エクスペリエンスの観点から最初のアプローチを選択します。私は2番目のアプローチに似たものを使用しましたが、うまく機能しますが、非常にぎこちなく感じます.

于 2012-08-11T14:59:07.770 に答える