javascript - addEventListener サブミットと jQuery サブミット

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();});

(ジェスビン)

jq-button をクリックしてもアラートが表示されません。なんで？

アップデート

を使用する外部 js コードがあり、addEventListener変更できません。しかし、私のコードでは、jQuery submit を使用したいと考えています。それらを組み合わせることはできますか？

Answer 1

次のように修正するだけです：

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

Answer 2

$().submit() は、eventlisterner ではなく jquery submit イベントをトリガーします。次のようなイベントのすべてのバインディングを 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 マークアップを変更できない場合。