Question

我有一个带有表单的页面，我将html插入div。我尝试插入按钮，但在jquery的帮助下插入后 - 提交按钮事件不起作用。

<html>
<head>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</head>
<script>
	$(document).ready(function() {
    	console.log("ready!");
    	$("#radio").click(function(){
    		console.log("radio clicked!");
    		
    		$.ajax({
    			type:'GET',
    			url: "content.html",
    			success:function(data){
    				$("#contentDiv").html(data);		
    			},
    			error:function(thrownError){
    				console.log("error",arguments);
    				console.log(thrownError);
    			}
    		});
    	});
	});
</script>
<body>

<form action="page2.html">
<input id="radio" type="radio" name="gender" value="male">Male</input>
<div id="contentDiv"></div>
</form>

</body>
</html>

`###content.html###`
<input type="submit" name="ok">OK</input>

Answer 1

由于您的元素是动态创建的，因此您需要使用on文档并定位按钮（#buttonId" or .buttonclass）。

$(document).on("click", "#buttonId", function(){
/// your code comes here....
});

Answer 2

试试这个

<form method="POST" id="login_form">
//form goes here
    <input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form> 


$(function() { //shorthand document.ready function
    $('#login_form').on('submit', function(e) { //use on if jQuery 1.7+
        e.preventDefault();  //prevent form from submitting
        var data = $("#login_form :input").serializeArray();
        console.log(data); //use the console for debugging, F12 in Chrome, not alerts
    });
});

Answer 3

根据您的偏好，您有两个要处理的事件： -

处理表单提交自己

$(document).ready(function() {
console.log("ready!");
$("#radio").click(function(){
    console.log("radio clicked!");

    $.ajax({
        type:'GET',
        url: "content.html",
        success:function(data){
            $("#contentDiv").html(data);        
        },
        error:function(thrownError){
            console.log("error",arguments);
            console.log(thrownError);
        }
    });
});
 // -----------------------------------------------------
//add this if you want to handle form submit
$( "#formId" ).submit(function( event ) {
alert( "Handler for .submit() form called." );
//event.preventDefault();
});
 // -----------------------------------------------------
});

给表单任意id

   <form action="page2.html" onsubmit='alert("submit");' id="formId">

或通过更新content.html

来处理输入类型提交的点击事件

<input type="submit" name="ok">OK</input>
// -----------------------------------------------------
<script>
  $( "input[name=ok]" ).click(function() {
  //put here you submit logic

});
</script>
// -----------------------------------------------------

如何从加载的页面提交<form>？

3 个答案: