Добавление кнопки w/jQuery cause button submit

Question

Я добавляю строку в таблицу. Это работает нормально, но строка содержит кнопку с кликом(). Всякий раз, когда я добавляю строку, запускается кнопка. Смотрите здесь

<script> 
 
//adds row to table 
 
$('#btnSAS').click(function (e) { 
 
    $('table tr:last').after('<tr><td>x</td><td><button class="btn btn-default btn-sm" type="button">blah</span></td></tr>'); 
 
}); 
 

 
    
 
//delete row 
 
$('button').click(function() { 
 
    alert('delete'); 
 
}); 
 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>Header</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td><td><button class="btn btn-default btn-sm" type="button">blah</span></td></td> 
 
    </tr> 
 
</table> 
 
<button class="btn btn-default btn-sm" id="btnSAS" type="button">Add Row<span class="glyphicon glyphicon-plus" aria-hidden="true"></span

Answer 1

Это немного трудно понять, что нужная функциональность от вашего объяснения, но проходящие через него пару раз я думаю, что я могу сказать, что вы пытаетесь делать.

Вы обращаетесь к каждой кнопке в документе с помощью функции удаления $('button'), но это не обновляется при добавлении новых строк. Попробуйте что-то подобное вместо этого, чтобы применить этот прослушиватель для кнопок внутри таблицы.

//adds row to table 
$('#btnSAS').click(function (e) { 
    $('table tr:last').after('<tr><td>x</td><td><button class="btn btn-default btn-sm" type="button">blah</button></td></tr>'); 
}); 


//delete row 
$('table').on('click', 'button', function() { 
    alert('delete'); 
}); 

Кроме того, ваш HTML имеет неверный формат, и не содержит закрывающий тег для <button>, а также имеет дополнительную и ненужную </td> тег.

Вот обновленная скрипка:

http://jsfiddle.net/ow3b6pjf/15/

Answer 2

Вы подключаете обработчик каждые кнопки, включая кнопку "Добавить строку":

$('button').click(function (e) { 
    alert('delete'); 
}); 

Таким образом, это не из новой строки, которая запускается, но сама кнопка «Добавить строку». Обработчик $('#btnSAS').click() и обработчик $('button').click() применяются к кнопке «Добавить строку», поэтому оба применяются.

Ваш код, прежде чем вы редактировали вопрос на самом деле устраняет проблему, поскольку это относится только обработчик к кнопкам таблицы:

$('button').click(function (e) { 
    alert('delete'); 
}); 

Однако, как и другие указали, это относится только к к кнопкам, которые существуют, когда вы назначаете обработчик (когда страница загружается).

Это обычная путаница с jQuery. Вы можете применять обработчики только к тем, которые существуют в DOM (уже находятся на веб-странице).

Способ использования делегата (назначить существующий элемент для просмотра кликов). В этом случае, вы можете назначить обработчик делегата к table элемента, а затем отфильтровать щелчки в зависимости от того, они возникли в кнопке или нет:

$('table').on('click', 'button', function() { 
    alert('delete'); 
}); 

В этом случае, любой щелчок, который берет свое начало в таблице фильтруются против селектора 'button', а затем обработчик вызывается по отфильтрованным результатам.

Fiddle: http://jsfiddle.net/ow3b6pjf/16/