將函數綁定到其他作用域上的onClick

我試圖將一個函數綁定到錨點「onclick」屬性。我沒有使用傳統的jQuery的bind/live/on/whatever，因爲我有一些其他腳本可以阻止事件傳播（這很糟糕，我知道）。將函數綁定到其他作用域上的onClick

到功能綁定到「點擊」屬性，我傳遞一個JSON對象模塊是這樣的：

function foo() { 
    alert('foo') 
} 

$('document').ready(function() { 
    var options = { 
     opt1: 'fooID', 
     opt2: 'barID', 
     json: mightyJSON, 
     actions: [ 
      { url: 'contact/_id_/edit', text: "Edit", iconPath: 'edit.png' }, 
      { url: '#', onClick: foo, text: "Delete", iconPath: 'delete.png' } 
     ] 
    }; 

    var trolol = myModule.configure(options); 
});

正如你可以看到一個名爲「foo」的傳遞函數通過「的onClick 「JSON的財產。該函數定義在對象的上方。

在「MyModule的」我創建錨標記是這樣的：

var buildLinks = function(objectID) 
{ 
    var linksNbr = actions.length; 
    var link, cssClass; 

    for (var i = 0; i < linksNbr; i++) 
    { 
    // Adding the object ID to the URL 
    link  = actions[i].url.replace('_id_', objectID); 
    cssClass = actions[i].cssClass || ''; 

    var $link = $(document.createElement('a')).attr('onClick', actions[i].onClick) 
               .attr('href', link) 
               .attr('title', actions[i].text) 
               .addClass(cssClass) 
               .text('foo'); 
    } 

    return $link.html(); 
};

的事情是，你可以期待當腳本解析，只存在執行「富」。「onclick」甚至沒有工作。

我可以像這樣通過onClick: 'foo()'。 onclick工作，但它也執行解析，在我看來，它非常醜陋。

我想還是能夠通過像這樣onClick: foo但正常工作（即未在加載執行，但只有點擊時。

它使用jQuery 1.4.4遺憾的是工作。

來源

2012-08-06 DevAntoine

嗨，你可以請張貼這個HTML，我們可以試試這個？或者你可以在http://jsfiddle.net/上發表小提琴嗎？這是更容易編碼，然後給你一個解決方案:) – TWickz 2012-08-06 08:37:38

你真的需要傳遞'.html（）'，而不僅僅是創建的元素？ – Alnitak 2012-08-06 08:39:55

將它作爲[actions [i] .onClick]（） – TWickz 2012-08-06 08:44:32

我會做這樣的：

var $link = $('<a></a>',{ 
    href : link, 
    title : actions[i].text, 
    'class' : cssClass, 
    text : 'foo', 
    click : actions[i].onclick 
}) 
return $link;

然後用其中一個（1，2）函數來插入節點，這與事件的HTML。

的傳播問題，我會做這樣的事情：

HTML <a href="#no" ....>text</a>

JS $('a[href="#no"]').live('click',function(){ return false; });

這樣每當HREF指向#no事件最終被傳播

來源

2012-08-06 08:44:04 Ties

不工作，事件從未被攔截 – DevAntoine 2012-08-06 09:42:13

我通過用'.append（）'插入最後一個元素來管理它的工作。我初始化時使用了一個HTML字符串，因爲我找不到更好的插入方法它在一個dhtmlxGridObject的單元格中，現在我使用'.append（）'而不是一個字符串'click（）'正常工作。 – DevAntoine 2012-08-06 14:00:13

如果可能的話，返回元素，而不是它的.html()
已經這樣做了，不使用時.attr('onclick', ...)你已經有了一個函數參考，使用.prop或甚至只是element.onclick = ...

例如，

$link = $('<a>', { 
    href: link, 
    title: actions[i].text, 
    'class': cssClass, 
    text: 'foo' 
}).prop('onclick', actions[i].onClick);

來源

2012-08-06 08:38:09 Alnitak

或'.click'或'.on（「click」）'或'.attr（'click'，ref）'（隱含地調用'.click'）：P – Esailija 2012-08-06 08:46:25

OP表示他不能使用'.on'。我注意到他還在序列化元素而不是傳遞它，這會破壞將處理程序設置爲一個屬性:( – Alnitak 2012-08-06 08:48:11

他說有些東西在阻止傳播，在這種情況下，他用什麼都沒有關係，如果有一些'.attr（「onclick」'的工作，然後正常的方式也必須工作。 – Esailija 2012-08-06 08:59:57

這裏是fiddle snippet。如果這種方法沒問題，你可以按照如下設置jQuery的原始元素onclick，像這樣：

$link[0].onclick = options.actions[i].onClick;

來源

2012-08-06 09:02:21

它正在工作，但我想知道爲什麼我需要使用raw 'onclick'屬性，以及爲什麼它不會在使用jQuery時觸發「foo」 attr'？ – DevAntoine 2012-08-06 09:43:03

我的猜測是jquery的函數「attr」執行函數，希望得到一個字符串（因爲它需要一個字符串），而上面的例子只是聲明瞭一個函數的引用。 – 2012-08-06 09:53:21

@koskoz：該屬性與JavaScript/jQuery的工作原理很少或沒有關係：該屬性是DOM元素的屬性，而不是JS對象，所以函數JS函數引用不能是html屬性，只能是其屬性名稱可以設置爲屬性。已批准的答案僅在JS中設置事件處理程序，而不是通過設置節點屬性，這樣您可以使用函數引用。或者，jQuery提供'.prop'方法，jQ爲你綁定 – 2012-08-06 10:17:45

將函數綁定到其他作用域上的onClick

回答

相關問題