Question

我正在使用bootstrap的模态

<div aria-hidden="hide" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="myModalLabel" class="modal-title"></h4>
            </div>
            <div id="myModalBody" class="modal-body modalScroll"></div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
            </div>
        </div>
    </div>
</div>

这是我的主要模式框，当我需要通知用户时，我会发送一些信息并显示模态。但我的想法是使用这个模态来显示图像，当用户选择一个我将保存为头像。所以我创建了如下函数：

<script>
    $('#avatar').click(function() {
        showMessage();
    });

    $('#eee').on('click', function() {
        alert('333');
    });

    function showMessage(){
        var txto = '<div id="eee">test me test</div>';
        $('#myModalLabel').append('Coose Your avatar');
        $('#myModalBody').append(txto);
        $('#myModal').modal('show'); 
    }
</script>

现在，当我进入页面并单击div id = avatar时，我会看到模态窗口但是当我点击时：测试我没有结果。这样做有什么办法吗？

Answer 1

尝试添加：

 $('#eee').on('click', function() {
    alert('333');
 });

在showMessage（）中...你的问题是你必须将事件重新绑定到动态添加的元素（如果它们是在（document）.ready之后添加的，或者在这种情况下是页面渲染...

每当我这样做时，我只需要制作一个名为rebindEvents（）的大函数，我可以调用它来让页面知道我的新项目...只是一个警告，如果你结束很多，它对性能不是很好你必须处理的jquery elems，knockout是一个更好的库，用于处理动态html然后这样做。

另外，我假设您要提供一个头像列表，所以您可能想要将eee换成一个类而不是id ...

如何从bootstrap模式中捕获事件

1 个答案: