javascript - 将元素数据传递给 Bootstrap 模态

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

但是，这似乎对我不起作用。我的场景的关键是按钮是动态生成的，我想知道是否因为我已经将所有内容都包装在一个辅助函数中并且它在创建动态按钮之前将自己绑定(bind)到页面并且因此不知道它们存在并且监听 .click 事件(它们是通过搜索创建的，按钮是搜索的结果)

有人知道我如何在有此限制的情况下将数据传递给模态吗？

Answer 1

如果按钮是动态生成的，你必须使用event-delegation使其工作:

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

事件委托(delegate):

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.