我應該使用自定義數據元素作爲JQuery中事件處理的參數持有者嗎？

在一個項目中，我使用內嵌代碼調用事件。 舊用法;我應該使用自定義數據元素作爲JQuery中事件處理的參數持有者嗎？

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

是這種方法好嗎使用或有更有意義的其他方式？以這種方式使用數據屬性可能會指出未來的問題？我不想浪費時間或使其變得複雜。

來源

2013-01-01 Eren CAY

您可以通過標記使用data-屬性避免混合PHP和JavaScript，並使用data()方法來讀取他們

HTML

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

$('#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-01 07:27:12 charlietfl