Функциональная кнопка onclick в javascript не работает

Я новичок в JQuery, у меня есть глупый вопрос для функции onclick. Пожалуйста, помогите мне.
У меня есть таблица, когда зритель нажимает кнопку «Добавить новый», я с помощью jquery добавляю строку в существующую таблицу. В новой строке есть 2 текстовых поля для ввода данных и кнопка для переноса данных из текстового поля в файл php.
Это мой код:
HTML-код:

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
<thead>
<td>No</td>
<td>First name</td>
<td>Last name</td>
</thead>
<?php

include("functions/connect_db.php");
$no=0;
$sql="SELECT * FROM `fullnames`";
$result=mysqli_query($conn,$sql) or die('Could not select Machine'.mysqli_error($conn));
while ($set=mysqli_fetch_array($result,MYSQLI_ASSOC))  {
$no++;
$first=$set['firstname'];
$last=$set['lastname'];
?>
<tbody>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $first; ?></td>
<td><?php echo $last; ?></td>
</tr>
<?php } ?>
</tbody>
</TABLE>

сценарий:

function addRow(tableID) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount ;var cell2 = row.insertCell(1);
var element1 = document.createElement("input");
element1.type = "text";
element1.id="first_input_"+rowCount;
cell2.appendChild(element1);var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.id="last_input_"+rowCount;
cell3.appendChild(element2);var cell4=row.insertCell(3);
var element3 = document.createElement('input');
element3.setAttribute('type','button');
element3.id="#button_"+rowCount;
element3.className="butt_class";
element3.value='Save';
cell4.appendChild(element3);

}

$(document).ready(function() {
$(".butt_class").click(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
if(first.length>0 && last.length>0)
{

$.ajax({
type: "POST",
url: "add_new.php",
data: dataString,
cache: false

});
}

})
})

Когда я нажимаю кнопку Сохранить в каждой строке, ничего не происходит. Я попытался заменить все нажмите Сохранить функцию с предупреждением, но нет изменений.
Пожалуйста, помогите мне.
Заранее спасибо!

0

Решение

click () не работает с динамически генерируемыми элементами. Вы можете использовать на ():

$(document).ready(function() {
$("#dataTable").on('click', '.butt_class', function() {
//...
});
});

или вы можете установить функцию при создании элемента:

element3.onclick= function() {
//...
};
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]