功能名称作为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属性

回答

相关问题