功能名稱作爲HTML屬性

我知道函數可以存儲在特定事件（例如onmouseover）的html屬性上，但是任何屬性都可以引用一個函數或只是特殊的屬性？功能名稱作爲HTML屬性

我想自動根據表單屬性連線ajax成功和失敗回調[例如，的onSuccess = 「警報（ 'whoohoo'）;」和onfail =「alert（'你吸'）;」]。是否有這樣的可能，或者我必須將函數存儲在已知事件中，並在失敗或成功時觸發事件？

我想與社區分享結果代碼與社會的好處。不幸的是我不能使用data- *作爲屬性名稱，因爲' - '對於屬性名稱不是有效字符，而是使用MVC和匿名類型創建表單。

// provide the ability to manually setup a form for ajax processing. 
// target are the forms to be wired 
// success is the callback function 
function AjaxifyForms(target, success, fail) { 
    $(target).each(function() {  // Wierdness if each isn't used with validation 
     $(this).validate({ 
      submitHandler: function(form) { 
       $.ajax({               //create an AJAX request 
        type: "POST",             //use POST (we could also load this from the form if wanted to) 
        url: $(form).attr("action"),      //get the URL from the form 
        data: $(form).serialize(), 
        datatype: "json", 
        success: function(data) { 
         if (success != undefined && success != null) success(data); 
         else if ($(form).attr("ajaxSuccssCallback") != undefined && $(form).attr("ajaxSuccssCallback") != null) 
          window[$(form).attr("ajaxSuccssCallback")](data); 
         else alert("Success"); 
        }, 
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
         if (faile != undefined && fail != null) fail(data); 
         else if ($(form).attr("ajaxFailCallback") != undefined && $(form).attr("ajaxFailCallback") != null) 
          window[$(form).attr("ajaxFailCallback")](data); 
         else alert("Epic Fail"); 
        } 
       }); 
       return false;       //don't forget to cancel the event so we don't submit the page! 
      } 
     }); 
    }); 
}

來源

2010-12-16 Marty Trenouth

你可以做一些瀏覽器測試，看看有什麼作品，什麼不可以。這就是我要做的。 – zzzzBov 2010-12-16 17:46:51

我想爲序列化做同樣的事情，但它看起來像你沒有找到一種方法來做到這一點， – Michael 2014-03-13 05:28:37

一個更好的辦法是使用HTML5的的data-*屬性，並且只存儲功能的名稱，而不是實際的可執行的JavaScript代碼。例如，

<form id="MyForm" data-success-callback="woohoo" data-failure-callback="suck" />

然後通過

var successFunc = window[$("#MyForm").attr("data-success-callback")]; 
var failureFunc = window[$("#MyForm").attr("data-failure-callback")];

這隻能得到那些函數的引用，如果他們是全局函數;否則你需要做一些更復雜的操作（比如分割.，然後使用索引符號）來獲得函數引用。

來源

2010-12-16 17:47:16 Domenic

好吧，但假設你想序列化實際的可執行JavaScript代碼 - 假設它是動態生成的或者某種東西，例如存儲函數名稱將不起作用，因爲該函數稍後不存在，因此代碼實際上必須位於HTML屬性中？ – Michael 2014-03-13 05:13:28

的HTML 5規範有一個列表中的所有valid event handler attributes

我認爲最好的方式來處理自定義事件（使用jQuery）是結合他們的腳本，並手動觸發它們。

Ex。

$('#myForm').bind('prefix-success', mySuccessFunction) 
    .bind('prefix-fail', myFailFunction);

那麼當它失敗或成功，你觸發的正常功能

if (success) $('#myForm').trigger('prefix-success'); 
else if (fail) $('#myForm').trigger('prefix-fail');

當然，這是眼下的問題的oversimplificiation。您將要創建調用/綁定事件的通用方式。

我建議使用事件前綴，以確保您的事件在以後的HTML規範中不會被覆蓋。

編輯補充：
我忘了提爲什麼保持功能的腳本是最好的：

HTML是語義標記（模型）。 CSS用於樣式（視圖）。 JavaScript用於交互（控制器）。保持控制器中的控制細節，以免混淆模型。

來源

2010-12-16 17:59:31 zzzzBov

這是一個非常狹隘的MVC視圖 – Michael 2014-03-13 05:14:41

功能名稱作爲HTML屬性

回答

相關問題