Question

有一个令人沮丧的时间，更糟糕的是我到处看到的例子在这种情况下都不起作用。我的假设是因为我不理解以哪种顺序加载哪些元素。

问题很常见，我有一个按钮，我想将数据传递到它打开的模态中。让我们说我想传递id。我的第一个想法是这样的，这是Stack Overflow的典型答案：

HTML：

<button class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal" id="product-button">Product Name</button>

JavaScript的：

$(function() {
    $('#product-button').click(function() {
        var productId = $(this).attr('name');
        $(".modal-body #testContainer").val(productId);
    });
});

这可以在这里看到： Passing data to a bootstrap modal

然而，这似乎对我不起作用。我的方案的踢球者是按钮是动态生成的，我想知道是否因为我已经将所有内容都包装在辅助函数中并且在创建动态按钮之前将其自身绑定到页面，因此不知道它们存在并且监听.click事件（它们是通过搜索创建的，按钮是搜索的结果）

有人对如何将数据传递给具有此限制的模态有任何想法吗？

Answer 1

如果动态生成按钮，则必须使用event-delegation才能使其正常工作：

$(function() {
    $(document).on('click','#product-button',function() {
        var productId = $(this).attr('name');
        $(".modal-body #testContainer").val(productId);
    });
});

事件代表团：

事件委托是指使用事件传播（冒泡）来处理DOM中更高级别的事件而不是事件源自的元素的过程。它允许我们为现在或将来存在的元素附加单个事件监听器。

将元素数据传递给Bootstrap模式

1 个答案:

事件代表团：