问使用html onclick属性调用jquery函数

EN

{% for sku, name, mrp, sp, id in product_data_list %}
    <form id="add_to_cart" action="{% url 'add_to_cart' %}" method="POST">
    {% csrf_token %}
        <li class="item col-lg-4 col-md-3 col-sm-4 col-xs-6">
            <div class="item-inner">
            ....
            ....
         <button class="button btn-cart" type="submit" id="product_id" value="{{id}}"><span>Add to Cart</span></button>
          ....

<script>

    jQuery(document).ready(function($){$('#add_to_cart').on('submit', function(event){
        event.preventDefault();
        $.ajax({
            url : "/add_to_cart/", // the endpoint
            type : "POST",
            cache: false,
            async: "true",
            data : { product_id : $('#product_id').val()}, // data sent with the post request

        success : function(json) {
            console.log("success");
            alert("Product Added To Cart.")
        },

        error : function(xhr,errmsg,err) {
            console.log(err);
            console.log(errmsg);
        }
    });
  });});
</script>