Question

我需要在一个带有多个事件处理的bootstrap popover中放入一些动态内容，但是没有一个被触发。例如：

HTML：

<span id="popover" class="btn btn-default">
    Popover
    <div class="content hide">
        <form id="form">
            <input type="text" class="form-control"/> 
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <button id="cancel" type="button" class="btn btn-default">Cancel</button>
    </div>    
</span>

使用Javascript：

$('#popover').popover({
    html: true,
    placement: 'bottom',
    content: function () {
        return $(this).parent().find('.content').html();
    }
});
$('#popover').on('shown.bs.popover', function () {
    $('#form').submit(function (e) { // never called
        e.preventDefault();
        alert('Form submitted');
    });
    $('#cancel').click(function () { //never called
        $('#popover').popover('hide');
        alert('popover closed');
    });
});

JS小提琴：http://jsfiddle.net/yddRB/

Answer 1

尝试delegating取消事件并提交如下内容：

取消

$(document.body).on('click',"#cancel",function () {
    $('#popover').popover('hide');
    alert('popover closed');
});

提交

$(document.body).on('submit','#form',function (e) {
     e.preventDefault();
     alert('Form submitted');
});

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

无法处理引导程序弹出窗口内容中的事件

1 个答案:

Updated Fiddle