Question

我有表格：

<form id="form1" class="f_class">
<input type="button" class="jq-button" value="jq-button"/>
</form>

和js代码：

var f=document.getElementById("form1");
f.addEventListener("submit", function(){alert("addEventListener_submit");},false);
$(".jq-button").click(function(){$("#form1").submit();});

（Jsbin）

当我点击jq-button提示时不显示。为什么呢？

更新

我有外部js代码，它使用addEventListener，我无法更改它。但在我的代码中我想使用jquery提交。我能把它们结合起来吗？

Answer 1

只需更正：

<input type="submit" class="jq-button" value="jq-button"/>

Answer 2

$（）。submit（）触发jquery submit事件而不是eventlisterner。我会用jQuery编写它所有的事件绑定，如：

var f = $("#form1");
f.on("submit", function() { // on requires jquery 1.7+
    alert("submit");
});
$(".jq-button").on("click", (function(e) {
    $(this).closest("form").trigger("submit");
    e.preventDefault();
});

编辑：

你可以做类似的事情：

var f=document.getElementById("form1");

f.addEventListener("submit", function(){
    alert("addEventListener_submit");
},false);

$(".jq-button").click(function(){
    var c = $(this),
        cc = c.clone().attr("type","submit");
    c.replaceWith(cc);
    cc.click();
});

如果您无法更改HTML标记。

addEventListener提交和jquery提交

2 个答案:

编辑：