Question

我正在生成JSON Feed中的条目列表。我想点击一个div并调出编辑模式。我在从click事件中获取relatedTarget时遇到了一些问题。它以未定义的形式返回。

是否有另一种将数据传递给模态的方法？

$.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的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) )
})

单击div时显示表单

2 个答案: