javascript - addEventListener submit and jQuery submit - Stack Overflow

admin管理员组

文章数量:1389857

I have form:

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

And js code:

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

(Jsbin)

When I click to jq-button alert does not show. Why?

UPDATE

I have external js code, which use addEventListener, and I can't change it. But in my code I want use jQuery submit. Can I bined them?

I have form:

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

And js code:

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

(Jsbin)

When I click to jq-button alert does not show. Why?

UPDATE

I have external js code, which use addEventListener, and I can't change it. But in my code I want use jQuery submit. Can I bined them?

• javascript
• jquery
• addeventlistener
• jquery-events

Share Improve this question Follow edited Jan 14, 2022 at 14:05 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 21, 2012 at 10:36 DeeRainDeeRain 1,35411 gold badge1515 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

just correct it to:

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

$().submit() triggers the jquery submit event and not the eventlisterner. I would have written it with jQuery all of the binding of events like:

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

Edit:

you could do something like:

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

if you can´t change the HTML markup.

本文标签： javascriptaddEventListener submit and jQuery submitStack Overflow