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

Question

我需要将一些动态内容放入引导弹出窗口中，并对其进行多个事件处理，但没有一个被触发。 例如:

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 fiddle :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');
});

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Updated Fiddle