event.preventDefault()无法与按钮一起使用?

问题描述

为什么在我的表单上.preventDefault()不起作用甚至alert()都不起作用?

Why is it .preventDefault() doesn't work or even alert() on my form?

<div id="popover-head" class="hide">Add new tab</div>
<div id="popover-content" class="hide">
    <form class="form-inline" id="myForm"  method="POST" action="../admin/FLT_add_tab.do">
    <div class="form-group">
        <!-- my form -->
        <input type="text" name="newTab"/>
        <button class="btn btn-primary" type="submit" ><i class="icon-white icon-ok"></i></button>
        <button class="btn" type="button" onClick="popRemove();" ><i class="icon-remove"></i></button>
    </div>
     </form>
</div>

JS代码:

$(document).ready(function() {
    $('#myForm').on('submit', function(e) {
        alert("Thank you for your comment!" + e);
        e.preventDefault();
    });
});

我不知道我在做什么错.

I don't know what am I doing wrong.

更新:

具有弹出窗口的链接:

<li><a href="#" id="popover"><i class="icon-plus-sign"></i> Tab</a></li>

触发弹出窗口的JS"

JS that trigger the popover"

$('#popover').popover({
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});

jsfiddle: http://jsfiddle.net/9uYuH/

jsfiddle: http://jsfiddle.net/9uYuH/

推荐答案

使用 .on()

由于引导程序中的弹出框会生成动态元素，因此您无法将事件直接绑定到它们.因此，您必须使用事件委托.

As popover in bootstrap generated dynamic elements you can not bind events directly to them .So you have to use Event Delegation.

$(document).on('submit','#myform', function(e) {
    alert("Thank you for your comment!" + e);
    e.preventDefault();
});

或更好地使用

$('#popover').on('submit','#myform', function(e) {
    alert("Thank you for your comment!" + e);
    e.preventDefault();
});

语法

$( elements ).on( events, selector, data, handler );

这篇关于event.preventDefault()无法与按钮一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！