javascript - 将类/对象->function() 调用插入到 onsubmit 事件中

Question

我正在尝试更改表单上的默认提交操作。提交由原型(prototype)js对象->现在的函数控制。

     <form action="" method="post" id="product_composite_configure_form" enctype="multipart/form-data" onsubmit="productConfigure.onConfirmBtn(); return false;" target="product_composite_configure_iframe">

我正在使用以下 javascript (jquery) 来更改默认提交操作。我的目标是在 onsubmit 监听器中插入一个不同的函数。

primaMakeOrder.prototype = {
    constructor: primaMakeOrder,

    start: function(response){

        this.storeOptions();
    },

     storeOptions: function(){
        $j("#product_composite_configure_form").attr("onsubmit",this.saveOptions());
    },

    saveOptions: function(){
        console.log('this is a test')
    }
 }

 $j(document).ready(function($j) {
    primaMakeOrder = new primaMakeOrder();
    primaMakeOrder.start();
});

在这里提交一个值并不困难，并且让它基于此执行一个函数也很简单。我遇到的麻烦是让它执行类对象中的函数，特别是 primaMakeOrder.saveOption()。这个问题似乎与实例化有关，但这并不完全正确，因为 javascript 本身可以工作。

我尝试单独添加 - primaMakeOrder.saveOptions() 和 saveOptions() 但这不起作用。理想情况下，我想要一个可以从 javascript 文件执行的解决方案，而不是在标记上执行，包括类似

  primaMakeOrder = new primaMakeOrder();
  primaMakeOrder.saveOptions();

*旁注 - 我知道同时使用原型(prototype)和 jquery 可能看起来很奇怪。这是一个更大的应用程序的一部分，这样做是有原因的。另外，我的术语可能有点偏差，所以很抱歉，我不太懂 js 编码器。

*阅读 - 在发布此内容之前，我在谷歌上浏览了一下，所有内容似乎都建议采用以下格式

  class.function()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects http://www.mrspeaker.net/2009/10/28/using-jquery-on-javascript-objects/ http://www.htmlgoodies.com/beyond/javascript/calling-object-methods-in-javascript.html

我的要求似乎有点不同，我正在努力寻找其他人来回答我的确切问题

Answer 1

您覆盖了所有变量范围!我猜primaMakeOrder已被定义为全局变量。因此，当您尝试使用 primaMakeOrder = new primaMakeOrder(); 重新分配它时引用丢失，并且您取回的对象具有与您想象的不同的原型(prototype)。

我建议提供一些范围并避免全局变量。我还建议改变你的原型(prototype)编码风格。对象字面量可能会令人困惑，并产生意想不到的副作用(主要是结束原型(prototype)链)。

(function() {
  // Wrap your code in an IIFE
  function PrimaOrder() {
    // this is your constructor
  }

  PrimaOrder.prototype.saveOptions = function() {
    // here is your saveOptions function on every PrimaOrder instance.
  };

  $(function() {
    // Use var to prevent making global variables
    var myPrimaOrder = new PrimaOrder();
    // Notice I use a different name. PrimaOrder is the variable that is
    // the "class" while myPrimaOrder is an "instance".
    myPrimaOrder.saveOptions();
  });
})(); // IIFE's require a trailing ()
// Search Google for Immediately Invoked Function Expression.