Таблица с использованием тега и пролетов

0

Я создаю таблицу с использованием css и комбинацию тегов <a> с <span> что-то вроде:

<a class='header'>
  <span>User ID</span>
  <span>Name</span>
  <span></span>
</a>
<a href='somesite.php'>
  <span>7</span>
  <span>Ofek</span>
  <span><button type="button" onclick="somefunc()">Add to Favourites</button></span>
</a>

результаты выглядят примерно так:

Изображение 174551

Теперь моя проблема заключается в том, что когда я нажимаю кнопку, я все равно перенаправляюсь на somesite.php, а функция somefunc() никогда не вызывается, я вижу где-то, что кнопка не может быть вложена внутри пролета, так что альтернатива для этой работы? Я хочу, чтобы всякий раз, когда пользователь нажимал на строку, он перенаправлял его на somesite.php, но не тогда, когда он нажимает кнопку, тогда мне нужно только вызвать func somefunc().

  • 1
    Можете ли вы опубликовать рабочую скрипку?
  • 7
    Кстати, вам разрешено использовать таблицы для таблиц - для замены таблицы на взломанную версию есть 0 причин. Мантра «не использовать таблицы» предназначена только для макета, а не для табличных данных.
Показать ещё 9 комментариев
Теги:

3 ответа

3
Лучший ответ

Вложение в button элемента в a элемента создает проблемы при обработке событий, и это запрещено в HTML5 CR.

Простым способом избежать проблемы является разделение интерактивных элементов:

<a href='somesite.php'>
  <span>7</span>
  <span>Ofek</span>
</a>
  <span><button type="button" onclick="somefunc()">Add to Favourites</button></span>

Это было бы невозможно (как таковое) в логическом подходе, где вы используете разметку table, но его простое, если вы имитируете таблицу с CSS, чтобы ячейки были элементами span (или, как правило, элементами фразы/встроенного/текстового уровня),

1

Просто добавьте return false в свой somefunc():

function someFunc () {
    // your existent code
    return false;
} 

и в HTML onclick="return somefunc()". Но я также рекомендую не использовать атрибуты onclick HTML, а использовать:

$("button").on("click", function (e) {
    e.preventDefault;
    somefunc();
    return false;
});

Читайте об этой теме здесь.

  • 0
    я уже пробовал, это не работает ...
  • 1
    @OfekRon: Вам также нужно добавить return к своему onclick . onclick="return somefunc()"
Показать ещё 7 комментариев
0

Вы можете связать событие click с кнопкой, а затем использовать preventDefault():

JS

function somefunc(e){
    e.preventDefault();
    alert("hey");
}
document.getElementById('abc').addEventListener(
    'click', somefunc, false
);

рабочая скрипка

http://jsfiddle.net/KRVUv/1/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню