前提・実現したいこと
remodal.jsを使って、select内の要素をモーダルで開くように実装したページを作成しました。
その中で、JavaScriptで追加生成したselectにもremodal.jsを適用しようとしたところ、上手くいきません。
やってみたこと
・remodal.jsのコードをコピーし、元々のコードの下に関数(remodalOrigin)として定義
・htmlを追加生成するボタンをクリックしたタイミングでremodalOriginを実行
・処理が重複した部分は削除
[html] <div id="add_area">行を追加</div> [js] function remodalOrigin() { (function ($) { !(function (root, factory) { ・ ・ ・ } $(function () { $(document).on('click', '#add_area', remodalOrigin); });
上手くいかない点
ボタンをクリックしてボタンをクリックしてremodal.jsを再実行すると、元々あったselectのモーダルが動かなくなってしまいます。
また、追加で生成したものも、一番新しく追加したものしか動かなくなってしまいます。
原因として、下記の点ではないかと思うのですが、どうすれば上手く動くのかが分からないため、ご教示いただけませんでしょうか。
・追加で生成されるRemodal{}がindex:0になってしまう
・$[PLUGIN_NAME]の配列に入っている値が、最初に実行したものに上書きされてしまう
[remodal.js(remodalOrigin内)] function Remodal($modal, options) { var $body = $(document.body); var $appendTo = $body; var remodal = this; remodal.settings = $.extend({}, DEFAULTS, options); remodal.index = $[PLUGIN_NAME].lookup.push(remodal) - 1; remodal.state = STATES.CLOSED; remodal.$overlay = $('.' + namespacify('overlay')); if (remodal.settings.appendTo !== null && remodal.settings.appendTo.length) { $appendTo = $(remodal.settings.appendTo); } if (!remodal.$overlay.length) { remodal.$overlay = $('<div>').addClass(namespacify('overlay') + ' ' + namespacify('is', STATES.CLOSED)).hide(); $appendTo.append(remodal.$overlay); } remodal.$bg = $('.' + namespacify('bg')).addClass(namespacify('is', STATES.CLOSED)); remodal.$modal = $modal .addClass( NAMESPACE + ' ' + namespacify('is-initialized') + ' ' + remodal.settings.modifier + ' ' + namespacify('is', STATES.CLOSED)) .attr('tabindex', '-1'); remodal.$wrapper = $('<div>') .addClass( namespacify('wrapper') + ' ' + remodal.settings.modifier + ' ' + namespacify('is', STATES.CLOSED)) .hide() .append(remodal.$modal); $appendTo.append(remodal.$wrapper); // Add the event listener for the close button remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="close"]', function (e) { e.preventDefault(); remodal.close(); }); // Add the event listener for the cancel button remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="cancel"]', function (e) { e.preventDefault(); remodal.$modal.trigger(STATE_CHANGE_REASONS.CANCELLATION); if (remodal.settings.closeOnCancel) { remodal.close(STATE_CHANGE_REASONS.CANCELLATION); } }); // Add the event listener for the confirm button remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="confirm"]', function (e) { e.preventDefault(); remodal.$modal.trigger(STATE_CHANGE_REASONS.CONFIRMATION); if (remodal.settings.closeOnConfirm) { remodal.close(STATE_CHANGE_REASONS.CONFIRMATION); } }); // Add the event listener for the overlay remodal.$wrapper.on('click.' + NAMESPACE, function (e) { var $target = $(e.target); if (!$target.hasClass(namespacify('wrapper'))) { return; } if (remodal.settings.closeOnOutsideClick) { remodal.close(); } }); }
あなたの回答
tips
プレビュー