ボタングループクリックハンドラー-クリックされたボタンのテキストコンテンツを取得するにはどうすればよいですか?

bogl

2つのボタングループを設定しようとしています。2番目のグループのいずれかのボタンをクリックすると、最初のグループに新しいボタンが追加されます。新しいボタンには、クリックしたボタンと同じラベルが付けられます。

var name = this.textContentクリックハンドラーが単一のボタンに接続されている場合に機能します。代わりにクリックハンドラーがボタンのグループにアタッチされている場合、クリックされたボタンのテキストコンテンツをどのように取得しますか?

HTML:

<body>
  <div id="group1">
    <button> nameA </button>
    <button> nameB </button>
  </div>
  <hr>
  <div id="group2">
    <button> nameC </button>
    <button> nameD </button>
  </div>
</body>

Javascript:

$('#group2').on('click', function(event) {
  var name = this.textContent   // wrong!
  var r = $('<input type="button" value="' + name + '">');
  $("div#group1").append(r);
});

JSFiddleデモ

RobHil

イベント委任を使用する:

$('#group2').on('click', 'button', function(event) {
  var name = this.textContent
  var r = $('<input type="button" value="' + name + '">');
  $("div#group1").append(r);
});

'on'メソッドの2番目のパラメーターは、イベントをトリガーする選択された要素の子孫をフィルター処理するためのセレクター文字列にすることができます。これを確認してくださいhttps://jsfiddle.net/q6b6g3xm/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

テキストボックスのコンテンツをデータベースに保存するにはどうすればよいですか?テキストボックスはHTMLとCSSでプログラムされています

分類Dev

ifステートメントでボタンクリックの段落コンテンツを変更するにはどうすればよいですか?

分類Dev

ラジオボタンでリンクされたテキストボックスの値を選択するにはどうすればよいですか?

分類Dev

ボタンがクリックされるたびにボタンのテキスト値を変更するにはどうすればよいですか?

分類Dev

クリップボードのボタンのテキストをコピーするにはどうすればよいですか?

分類Dev

データグリッドでコンボボックスの選択された値を取得するにはどうすればよいですか?

分類Dev

リストビュー内でクリックされたトグルボタンの位置を取得するにはどうすればよいですか?

分類Dev

光沢のあるアプリで印刷ボタンを作成して、ユーザーがテキストボックスに入力したテキストのハードコピーを印刷するにはどうすればよいですか?

分類Dev

Shinyのループ内のボックスのhtmlコンテンツをレンダリングするにはどうすればよいですか?

分類Dev

AngularJS + Angularストラップ-クリックされたボタンに応じて動的コンテンツをモーダルに追加するにはどうすればよいですか?

分類Dev

ボタンがクリックされたコントローラーとアクションを取得するにはどうすればよいですか?

分類Dev

Mac AppStoreのosxアプリケーションにコマンドラインユーティリティをバンドルするにはどうすればよいですか(サンドボックスエンタイトルメントを使用)

分類Dev

コマンドラインからクリップボードにリッチテキストを送信するにはどうすればよいですか?

分類Dev

JavaScriptで、ボタンをクリックしてボタン内のテキストを取得するにはどうすればよいですか?

分類Dev

クリックされたボタンに応じてコンテンツを変更するテキストビューを作成するにはどうすればよいですか?(android、eclipse)

分類Dev

フリップブックスタイルのボリュームテクスチャでハードウェアの3Dテクスチャサンプリングを使用するにはどうすればよいですか?

分類Dev

クリックボタンでテキストボックスの値を取得するにはどうすればよいですか?

分類Dev

クリックボタンでテキストボックスの値を取得するにはどうすればよいですか?

分類Dev

インスタンスに対してOracleCloudが提供するコンピューティングメトリック以外のメトリック(スレッド数、ハンドル数)を取得するにはどうすればよいですか?

分類Dev

div内の要素をクリックして、DOMにループされた配列内のオブジェクトから派生したその要素のテキストコンテンツを取得するにはどうすればよいですか?

分類Dev

swtのボタンをクリックしたときにテキストボックスを作成するにはどうすればよいですか?

分類Dev

UWPでハイパーリンクへのテキストブロックコンテンツを作成するにはどうすればよいですか?

分類Dev

クリック時にハイパーリンクのみがトリガーされるように、クリック可能なdivタグにテキストハイパーリンクを配置するにはどうすればよいですか。

分類Dev

コンテンツを追加するときに、タブ順とスクリーンリーダーカーソルのボタンをスキップするにはどうすればよいですか?

分類Dev

コントローラから送信された値をテキストボックスで取得するにはどうすればよいですか?

分類Dev

CSSグリッドレイアウトを使用して、スティッキーヘッダーとフッターを持つコンテンツのスクロールバーを取得するにはどうすればよいですか?

分類Dev

データグリッドビューを使用せずにコンボボックスにバインドされているデータテーブルのデータを編集するにはどうすればよいですか?

分類Dev

ハイパーリンクの右クリックされたコンテキストメニューからどのオプションがクリックされたかを検出するにはどうすればよいですか?

分類Dev

Outlookインスペクターウィンドウとインライン応答コンテキストメニューの両方にリボングループを追加するにはどうすればよいですか?

Related 関連記事

  1. 1

    テキストボックスのコンテンツをデータベースに保存するにはどうすればよいですか?テキストボックスはHTMLとCSSでプログラムされています

  2. 2

    ifステートメントでボタンクリックの段落コンテンツを変更するにはどうすればよいですか?

  3. 3

    ラジオボタンでリンクされたテキストボックスの値を選択するにはどうすればよいですか?

  4. 4

    ボタンがクリックされるたびにボタンのテキスト値を変更するにはどうすればよいですか?

  5. 5

    クリップボードのボタンのテキストをコピーするにはどうすればよいですか?

  6. 6

    データグリッドでコンボボックスの選択された値を取得するにはどうすればよいですか?

  7. 7

    リストビュー内でクリックされたトグルボタンの位置を取得するにはどうすればよいですか?

  8. 8

    光沢のあるアプリで印刷ボタンを作成して、ユーザーがテキストボックスに入力したテキストのハードコピーを印刷するにはどうすればよいですか?

  9. 9

    Shinyのループ内のボックスのhtmlコンテンツをレンダリングするにはどうすればよいですか?

  10. 10

    AngularJS + Angularストラップ-クリックされたボタンに応じて動的コンテンツをモーダルに追加するにはどうすればよいですか?

  11. 11

    ボタンがクリックされたコントローラーとアクションを取得するにはどうすればよいですか?

  12. 12

    Mac AppStoreのosxアプリケーションにコマンドラインユーティリティをバンドルするにはどうすればよいですか(サンドボックスエンタイトルメントを使用)

  13. 13

    コマンドラインからクリップボードにリッチテキストを送信するにはどうすればよいですか?

  14. 14

    JavaScriptで、ボタンをクリックしてボタン内のテキストを取得するにはどうすればよいですか?

  15. 15

    クリックされたボタンに応じてコンテンツを変更するテキストビューを作成するにはどうすればよいですか?(android、eclipse)

  16. 16

    フリップブックスタイルのボリュームテクスチャでハードウェアの3Dテクスチャサンプリングを使用するにはどうすればよいですか?

  17. 17

    クリックボタンでテキストボックスの値を取得するにはどうすればよいですか?

  18. 18

    クリックボタンでテキストボックスの値を取得するにはどうすればよいですか?

  19. 19

    インスタンスに対してOracleCloudが提供するコンピューティングメトリック以外のメトリック(スレッド数、ハンドル数)を取得するにはどうすればよいですか?

  20. 20

    div内の要素をクリックして、DOMにループされた配列内のオブジェクトから派生したその要素のテキストコンテンツを取得するにはどうすればよいですか?

  21. 21

    swtのボタンをクリックしたときにテキストボックスを作成するにはどうすればよいですか?

  22. 22

    UWPでハイパーリンクへのテキストブロックコンテンツを作成するにはどうすればよいですか?

  23. 23

    クリック時にハイパーリンクのみがトリガーされるように、クリック可能なdivタグにテキストハイパーリンクを配置するにはどうすればよいですか。

  24. 24

    コンテンツを追加するときに、タブ順とスクリーンリーダーカーソルのボタンをスキップするにはどうすればよいですか?

  25. 25

    コントローラから送信された値をテキストボックスで取得するにはどうすればよいですか?

  26. 26

    CSSグリッドレイアウトを使用して、スティッキーヘッダーとフッターを持つコンテンツのスクロールバーを取得するにはどうすればよいですか?

  27. 27

    データグリッドビューを使用せずにコンボボックスにバインドされているデータテーブルのデータを編集するにはどうすればよいですか?

  28. 28

    ハイパーリンクの右クリックされたコンテキストメニューからどのオプションがクリックされたかを検出するにはどうすればよいですか?

  29. 29

    Outlookインスペクターウィンドウとインライン応答コンテキストメニューの両方にリボングループを追加するにはどうすればよいですか?

ホットタグ

アーカイブ