divをクリックしたときにフォームを表示

Question

JSONフィードからエントリのリストを生成しています。 divをクリックして編集モーダルを表示したい私はclickイベントからrelatedTargetを取得する際に問題が発生しています。これは未定義として返されます。

データをモーダルに渡す別の方法はありますか？あなたの動的に作成.panel要素のための

$.getJSON('api/v1/module', function(data){ 
    $.each(data, function(i, learning) { 
     var $div = $('<div>') 
     .append(
      $('<p>').text(learning.title), 
      $('<p>').text(learning.lastupdated) 
     ) 
     .addClass('panel panel-default') 
     .attr('data-title', learning.title) 
     .appendTo('.module-list') 
     .on('click', function(){ 
      $('#edit-module').modal({ 
       show: true 
      }) 
     }) 
    }); 
}) 

$('#edit-module').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) // Button that triggered the modal 
    var recipient = button.data('title') // Extract info from data-* attributes 
     // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 
     // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. 
    var modal = $(this) 
    modal.find('.modal-body input').val(recipient) 

    console.log(event.relatedTarget) 
    console.log(event) 
    console.log(button) 
    console.log(JSON.stringify(button)) 
}) 

Answer 1

：

クリックによって引き起こされる場合は、クリックされた要素は、イベントの relatedTargetプロパティとして利用可能です。

しかし、ここでは、最初のクリックではなく、modal()が表示されます。

ドキュメントに記載されているようにクリックトリガを表示するには、Boostrapのdata-toggleを使用してモーダルを呼び出す必要があります。これらのデータ属性を追加し、あなたの.on()ハンドラを削除：

$.getJSON('api/v1/module', function(data){ 
    $.each(data, function(i, learning) { 
     var $div = $('<div>') 
     ... 
     .attr('data-title', learning.title) 
     .attr("data-toggle", "modal") 
     .attr("data-target", "#edit-module") 
     .appendTo('.module-list') 
    }); 
}) 

Answer 2

使用イベント委任。

直接委任イベント：http://api.jquery.com/on/

イベントハンドラにのみ、現在選択された要素にバインドされています。コードが.on()に電話をかけた時点で存在していなければなりません。要素が存在し、選択できるようにするには、HTMLマークアップ内の要素の後にスクリプトを配置するか、文書レディハンドラ内でイベントバインディングを実行します。また、代理イベントを使用してイベントハンドラをアタッチすることもできます。 Boostrap docsから

$(function() { 
    $('.module-list').on('click', '.panel', function(){ 
    $('#edit-module').modal({ 
     show: true 
    }) 
    }) 
}); 

$.getJSON('api/v1/module', function(data){ 
    $.each(data, function(i, learning) { 
     var $div = $('<div>') 
     .append(
      $('<p>').text(learning.title), 
      $('<p>').text(learning.lastupdated) 
     ) 
     .addClass('panel panel-default') 
     .attr('data-title', learning.title) 
     .appendTo('.module-list') 
    }); 
}) 

$('#edit-module').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) // Button that triggered the modal 
    var recipient = button.data('title') // Extract info from data-* attributes 
     // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 
     // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. 
    var modal = $(this) 
    modal.find('.modal-body input').val(recipient) 

    console.log(event.relatedTarget) 
    console.log(event) 
    console.log(button) 
    console.log(JSON.stringify(button)) 
})