Показать форму при нажатии div

Question

Я создаю список записей из канала JSON. Я хочу щелкнуть div и вызвать редактирование модального. У меня возникли проблемы с получением связанного таргетинга с событием click. Он возвращается как неопределенный.

Есть ли другой способ передачи данных в модальный?

$.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

Из Boostrap docs:

Если вызвано щелчком, щелкнули элемент доступен как relatedTarget свойство события .

Но здесь дисплей вызван modal(), а не начальным щелчком.

Чтобы активировать щелчок на экране, как описано в документах, вам необходимо вызвать модальный код с помощью Boostrap's 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

Используйте событие делегации для динамически создаваемых элементов .panel.

Прямые и делегированные события: http://api.jquery.com/on/

обработчики событий привязанные только к выбранным в данный момент элементов; они должны существовать в момент, когда ваш код делает звонок.on(). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, поместите скрипты после элементов в разметке HTML или выполните привязку событий внутри обработчика документа. Кроме того, используйте делегированные события для присоединения обработчиков событий.

$(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)) 
})