0

プロジェクトでは、インラインコードからイベントを呼び出していました。 古い使用法;

<button id='button' onclick='do_stuff("<?= $id ?>", "<?= $name ?>")'>Do</button>

しかし今、私はイベントリスナーを使いたいです。新しい使用法;

$('#button').click({id:'<?= $id ?>', name:'<?= $name ?>'}, item_event_handler);

function item_event_handler(event)
{
  var id = event.data.id;
  var name = event.data.name;

  do_stuff(id, name);
}

function do_stuff(id, name)
{
}

これは動作します。しかし、ここに問題があります。以下のようなアイテムをリストしていて、それらのアイテムにイベントリスナーを追加したいとします。現在の使用法;

<ul>
  <? foreach($items as $item): ?>
  <li class='item' onclick='do_stuff("<?= $item->id ?>", "<?= $item->name ?>")'>
    <?= $item->title ?>
  </li>
  <? endforeach ?>
</ul>

これらのアイテムをJavaScriptで作成したくないので、個々のパラメーターを使用してイベントリスナーを追加することはできません。パラメータをフェッチするためにデータ属性を使用する必要がありますか？好き;

$('.item').click(item_event_handler);

function item_event_handler(event)
{
  var id = $(this).data('id');
  var name = $(this).data('name');

  do_stuff(id, name);
}

<ul>
  <? foreach($items as $item): ?>
  <li class='item' data-id='<?= $item->id ?>' data-name='<?= $item->name ?>'>
    <?= $item->title ?>
  </li>
  <? endforeach ?>
</ul>

このアプローチは使用しても大丈夫ですか、それとももっと意味のある他の方法がありますか？このようにデータ属性を使用すると、将来の問題を指摘できる可能性がありますか？時間を無駄にしたり、複雑にしたりしたくありません。

4

3 に答える 3

0

属性を使用data-*して要素にデータを保存すると、jquery を使用してこれらのデータに簡単にアクセスできます。

編集：次のようにアクセスする必要があります：

$(selector).attr('data-id');
于 2013-01-01T07:25:06.983 に答える
0

data-マークアップで属性を使用し、data()メソッドを使用してそれらを読み取ることにより、php と javascript の混合を回避でき ます。

HTML 

<li class="item" data-id="<?= $item->id ?>" data-name="<?= $name ?>">

JS

$('#button').click( item_event_handler);

function item_event_handler(event)
{
  var id = $(this).data('id');
  var name = $(this).data('name');

  do_stuff(id, name);
}
于 2013-01-01T07:27:12.830 に答える
0

これを使用して、クリックイベントをアイテムにバインドできます...関数を呼び出すか、内部で必要な水を実行できます

$("body").on("click","item" function(event){ item_event_handler(); });

于 2013-01-01T07:29:31.460 に答える