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);
});
イベント委任を使用する:
$('#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]
コメントを追加