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 回答