I have a table and filled it with ajax
TABLE
<table id="tabla_productos"> </table>
Ajax sourced data
var tabla_productos = $('#tabla_productos').DataTable( {
"responsive" : "true",
"ajax": {
"url": "/funciones/getProductos.php",
"dataSrc": ""
},
"columns": [
{ "data": "id" },
{ "data": "add_cart" }
]
}});
AJAX DATA
{"id":"2",
"add_cart":"<form class=\"form-item\"><input type=\"hidden\" value=\"1\" name=\"product_qty\"><input type=\"hidden\" value=\"S10881\" name=\"product_code\"><button class=\"btn\" type=\"submit\">Add to Cart<\/button><\/form>" }
jQuery Form submit:
$(".form-item").submit(function(e){
alert('ok');
e.preventDefault();
});
HTML OUTPUT: form created from ajax
<form class="form-item"><input type="hidden" name="product_qty" value="1"><input type="hidden" name="product_code" value="S10881"><button type="submit" class="btn">Add to Cart</button></form>
SAME FORM CREATED FROM HTML:
<form class="form-item"><input type="hidden" name="product_qty" value="1"><input type="hidden" name="product_code" value="S10881"><button type="submit" class="btn">Add to Cart</button></form>
- When i submit the form created from html it works ok.
- If i submit the form created from ajax it doesn't works.
-
If i wait that table fill up with data, it works:
setTimeout(function(){ $(".form-item").submit(function(e){ alert('ok');
e.preventDefault(); }); }, 10000);