問題タブ [jquery-clone]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 動的に追加されたフィールドで GSAP と querySelectorAll が起動しない
私はこのコードペンhttps://codepen.io/aaroniker/pen/WNxoovJurl-inputからコードを試しています。コードペンに示されているように、クラスを持つ div 内の入力フィールドでうまく機能します。ただし、すべてを id の div に配置しwrapper、jquery-clone 関数を追加して を複製するdiv.url-inputと、HTML は正常に複製されますが、動的に追加されたフィールドに対してすべての機能が機能しなくなります。ページの残りの部分では jQuery を使用していますが、この codepen ではプレーンな JavaScript を使用しています。
これは、forEach ループ内のイベント リスナーにも問題があると思われます。これが私が試したことです：document.querySelectorAll('.url-input').forEach(elem => {21行目の代わりに、私は試しました
document.querySelectorAll('#wrapper').forEach(elem => {
そして23行目、23行目、25行目、27行目では、子孫セレクターを使用しましたelem.querySelector('.url-input .icon')。elem.querySelector('.icon')
上記を試したところ、初期url-inputフィールドでさえ機能しなくなり、動的フィールドも発火しませんでした。url-input複数のdiv を動的に追加できるラッパーにこのコードを組み込むにはどうすればよいですか?
編集: クローン作成プロセスのスクリプトを含むすべてのコードを次に示します。「template」タグには、簡単に複製できるように、URL 入力フィールド用の HTML テンプレートの縮小版が含まれています。ここでスペースを節約するために、CSS スタイルも縮小しました。