動的に作成されたモーダルが機能しない

Question

次のフィールドとリンクがadd moreを使用して作成されたフォームがあります。最初の行はモーダルウィンドウを完全に表示しますが、動的に作成されるリンクにはモーダルが表示されません。

$row += '<tr>'; 

$row += '<td width="20%">'; 
$row += '<a href="javascript:void(0)" id="showModal'+sl_no+'"> Add Documents/Req. </a>'; 
$row += '</td>'; 

$row += '<div class="modal fade" id="modal'+sl_no+'" tabindex="-1" role="dialog">'; 
$row += '<div class="modal-dialog" role="document">'; 
$row += '<div class="modal-content">'; 
$row += '<div class="modal-header">'; 
$row += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'; 
$row += '<h4 class="modal-title">Modal title</h4>'; 
$row += '</div>'; 
$row += '<div class="modal-body">'; 
$row += '<p>One fine body&hellip;</p>'; 
$row += '</div>'; 
$row += '<div class="modal-footer">'; 
$row += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'; 
$row += '<button type="button" class="btn btn-primary">Save changes</button>'; 
$row += '</div>'; 
$row += '</div>'; 
$row += '</div>'; 
$row += '</div>'; 

をそして、これは配置されています：動的な行は以下のように作成され

$last_tr = $('#indent_item_list tr:last'); 
$last_tr.after($new_row); 

$('#showModal'+sl_no).on('click', function() { alert('fff'); 
    $('#modal'+sl_no).modal('show'); 
}); 

を私はAdd Documents/Reqをクリックすると、そのモーダルを示していません！これを解決するには？

FIDDLE HERE

Answer 1

あなたのコード内の問題のカップル：

1）あなたは、テーブル要素内のdivを追加しようとしています。それはうまくいかないでしょう。 tdにdiv要素を追加するか、モーダルに別のコンテナを追加する必要があります。

2）また、追加した後に各行にclickイベントを追加する必要はありません。イベントの委任には、静的な親要素を使用する必要があります。現在のケースではテーブル要素です。

$('#indent_item_list').on('click','[id^=showModal]', function() { 
    $('#modal'+this.id.replace('showModal','')).modal('show'); 
}); 

Working Demo

Answer 2

あなたが何かを行うことができ、TRでdiv要素を追加

$(document).on('click', '[id^=showModal]', function() { 

Answer 3

は良い練習

ない新しいコードにあなたのフィドルコードで

$('#showModal1').click(function() { 

を置き換えますこのように

https://jsfiddle.net/rntshg76/4/

HTML： -

<div class="modals-container"> 
    <div class="modal fade" id="modal1" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title">Modal title</h4> 
       </div> 
       <div class="modal-body"> 
        <p>One fine body&hellip;</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 
</div> 

<table class="table" id="indent_item_list"> 
<tr> 
    <th>LINK</th> 
</tr> 
<tr> 
    <td> 
     <a href="javascript:void(0)" id="showModal1"> Add Documents/Req. </a> 
    </td> 

</tr> 
</table> 

<a href="javascript:void(0)" class="btn btn-warning add_more_item btn-sm">Add More Item 

Javascriptを

var sl_no = 1; 
$('#showModal1').click(function() { 
    $('#modal1').modal('show'); 
}); 

$('.add_more_item').click(function(e) { 

    sl_no++; 
    $new_row = generateARow(sl_no); 
    $last_tr = $('#indent_item_list tr:last'); 

    //$(".select2").select2("destroy"); 
    $last_tr.after($new_row); 

    $('#showModal'+sl_no).on('click', function() { 
     $('#modal'+sl_no).modal('show'); 
    }); 

    item++; 
}); 

function generateARow(sl_no) { 
$row = ''; 
$modal = ''; 
$row += '<tr>'; 

$row += '<td width="20%">'; 
$row += '<a href="javascript:void(0)" id="showModal'+sl_no+'"> Add Documents/Req. </a>'; 
$row += '</td>'; 

$row += '</tr>'; 



$modal += '<div class="modal fade" id="modal'+sl_no+'" tabindex="-1" role="dialog">'; 
$modal += '<div class="modal-dialog" role="document">'; 
$modal += '<div class="modal-content">'; 
$modal += '<div class="modal-header">'; 
$modal += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'; 
$modal += '<h4 class="modal-title">Modal title</h4>'; 
$modal += '</div>'; 
$modal += '<div class="modal-body">'; 
$modal += '<p>One fine body&hellip;</p>'; 
$modal += '</div>'; 
$modal += '<div class="modal-footer">'; 
$modal += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'; 
$modal += '<button type="button" class="btn btn-primary">Save changes</button>'; 
$modal += '</div>'; 
$modal += '</div>'; 
$modal += '</div>'; 
$modal += '</div>'; 
$(".modals-container").append($modal); 
    return $row; 
} 

Answer 4

あなたのコードは大丈夫です：一緒にID showModalで始まるすべての行要素をターゲットにする属性で始まりです。 問題は、あなたのモーダルがテーブルに追加されていることです。ブートストラップでは動作しません。

モーダルをテーブルの外に置くことができるかどうかを確認してください。すべてうまくいくはずです。

挨拶