Bit2 Developer Ответов: 3

Новая добавленная функция кнопки/событие не работает, если я делаю ее копию с помощью HTML() и добавляю()

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

Что я уже пробовал:

<pre><table id="tblEmployee" class="table-bordered table-striped table-condensed cf">
        <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Emial ID</th>
                <th>Phone No.</th>
                <th>Salary</th>
        	<th>Campany</th>
        </tr>
	<tr>
                <td>XDF10002</td>
                <td>Zeeshan Ali</td>
                <td>zeeshan.cool@yahoo.com</td>
                <td>
                	<button id="btnEventCheck" class="btn btn-danger">Button</button></td>
                <td>96000</td>
        	<td>CASHIT Pvt. Ltd.</td>
	</tr>
</table>
<br />
<asp:Button ID="btnTest" runat="server" class="btn btn-primary" Text="Test" />
<asp:Button ID="btnAppend" runat="server" class="btn btn-success" Text="Append" />
<asp:Button ID="btnGetTableData" runat="server" class="btn btn-warning" Text="Get Table Data" />


<script type="text/javascript">
        $(document).ready(function () {
            $("#btnAppend").click(function () {
                var trTag = $("#tblEmployee tr:eq(1)").html();
                var trTag_ = "<tr>" + trTag + "</tr>";
                //alert(trTag_);
                $("#tblEmployee").append(trTag_);
                return false;
            });

            $("#btnEventCheck").click(function () {
                alert("Testified");
                return false;
            });
        });
    </script>

F-ES Sitecore

Вам нужно будет прикрепить событие click к только что созданной строке.

3 Ответов

Рейтинг:
28

Karthik_Mahalingam

Добавьте обработчик событий отдельно и попробуйте.

<button id="btnEventCheck" onclick="return funEventCheck()" class="btn btn-danger  ">Button</button></td>



function funEventCheck() {

              alert("Testified");
              return false;
      }

Рейтинг:
2

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Кнопка имеет id свойство, которое должно быть уникальным. Когда вы копируете и добавляете, он снова добавляет кнопку с тем же самым id Итак, ваша html-структура теперь неверна.

Попробуйте иметь class для кнопки и снимите id... Будет выглядеть так, как показано ниже.

<button class="btnEventCheck" class="btn btn-danger">Button</button>
$(".btnEventCheck").click(function () {
    alert("Testified");
    return false;
});

Richard Deeming

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

Вам нужно будет использовать делегированное событие для обработки вновь добавленных кнопок: . on() | jQuery API документация[^]

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

О, я понял твою точку зрения, Ричард. Спасибо :)

Рейтинг:
17

Richard Deeming

Как уже упоминалось в решении 1, у вас не должно быть нескольких элементов с одним и тем же id; вы должны использовать альтернативный метод идентификации кнопки.

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

Чтобы исправить это, вам нужно будет использовать делегированные события.

<button class="btnEventCheck" class="btn btn-danger">Button</button>
$("#tblEmployee").on("click", ".btnEventCheck", function(){
    alert("Testified");
    return false;
});

. on() | jQuery API документация[^]

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

+5