Question

我正在尝试将函数绑定到锚点“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”的函数是通过JSON的“onClick”属性传递的。该函数在对象上方定义。

在“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();
};

问题是，正如您所期望的那样，'foo'在解析脚本时执行，并且只在那里执行。 “onclick”甚至不起作用。

我可以像onClick: 'foo()'那样过去。 onclick有效，但它也在解析时执行，在我看来，它非常难看。

我仍然可以像onClick: foo一样传递它，但工作正常（即在加载时不执行，但仅在点击时执行。

不幸的是，它必须与jQuery 1.4.4一起使用。

Answer 1

如果可能的话，返回元素，而不是它的.html()
完成后，当您已经有功能参考时，请不要使用.attr('onclick', ...)，使用.prop，或者只使用element.onclick = ...

e.g。

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

Answer 2

我会这样做：

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，事件最终就会传播

Answer 3

这是fiddle snippet。如果这种方法没问题，你可以在下面设置onclick on jquery的raw元素，如下所示：

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

将函数绑定到onClick on other scope

3 个答案: