4

関数をアンカー「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 で動作する必要があります。

4

3 に答える 3

0

  1. 可能であれば、その要素ではなく要素を返します.html()

  2. それを行っ.attr('onclick', ...)たら、関数参照を既に取得している場合は使用しないでください。.propelement.onclick = ...

例えば

$link = $('<a>', {
    href: link,
    title: actions[i].text,
    'class': cssClass,
    text: 'foo'
}).prop('onclick', actions[i].onClick);
于 2012-08-06T08:38:09.710 に答える
0

ここにフィドルのスニペットがあります。このアプローチが問題ない場合は、次のように、jquery の raw 要素に onclick を設定できます。

$link[0].onclick = options.actions[i].onClick;
于 2012-08-06T09:02:21.743 に答える
0

私は次のようにします：

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-06T08:44:04.753 に答える