추가 방법 후 Jquery click 이벤트가 작동하지 않음
그래서 나는 테이블에 새 행을 추가하는 이 버튼을 가지고 있지만, 내 문제는 그것이 듣지 않는다는 것입니다..new_participant_form
추가 방법이 수행된 후 이벤트를 더 이상 클릭하지 않습니다.
[새 항목 추가]를 누른 후 양식 이름을 누릅니다.
$('#add_new_participant').click(function() {
var first_name = $('#f_name_participant').val();
var last_name = $('#l_name_participant').val();
var role = $('#new_participant_role option:selected').text();
var email = $('#email_participant').val();
$('#registered_participants').append('<tr><td><a href="#" class="new_participant_form">Participant Registration</a></td><td>'+first_name+ ' '+last_name+'</td><td>'+role+'</td><td>0% done</td></tr>');
});
$('.new_participant_form').click(function() {
var $td = $(this).closest('tr').children('td');
var part_name = $td.eq(1).text();
alert(part_name);
});
});
HTML
<table id="registered_participants" class="tablesorter">
<thead>
<tr>
<th>Form</th>
<th>Name</th>
<th>Role</th>
<th>Progress </th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" class="new_participant_form">Participant Registration</a></td>
<td>Smith Johnson</td>
<td>Parent</td>
<td>60% done</td>
</tr>
</tbody>
</table>
<button id="add_new_participant"></span>Add New Entry</button>
사용:
$('#registered_participants').on('click', '.new_participant_form', function() {
클릭이 의 모든 요소에 위임되도록 합니다.#registered_participants
수업하기new_participant_form
이벤트 핸들러를 바인딩한 후에 추가되는 경우에도 마찬가지입니다.
이 메서드는 동적으로 추가되거나 DOM에 이미 존재하는 요소에 이벤트를 위임하는 데 사용됩니다.
// STATIC-PARENT on EVENT DYNAMIC-CHILD
$('#registered_participants').on('click', '.new_participant_form', function() {
var $td = $(this).closest('tr').find('td');
var part_name = $td.eq(1).text();
console.log( part_name );
});
$('#add_new_participant').click(function() {
var first_name = $.trim( $('#f_name_participant').val() );
var last_name = $.trim( $('#l_name_participant').val() );
var role = $('#new_participant_role').val();
var email = $('#email_participant').val();
if(!first_name && !last_name) return;
$('#registered_participants').append('<tr><td><a href="#" class="new_participant_form">Participant Registration</a></td><td>' + first_name + ' ' + last_name + '</td><td>' + role + '</td><td>0% done</td></tr>');
});
<table id="registered_participants" class="tablesorter">
<thead>
<tr>
<th>Form</th>
<th>Name</th>
<th>Role</th>
<th>Progress </th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" class="new_participant_form">Participant Registration</a></td>
<td>Smith Johnson</td>
<td>Parent</td>
<td>60% done</td>
</tr>
</tbody>
</table>
<input type="text" id="f_name_participant" placeholder="Name">
<input type="text" id="l_name_participant" placeholder="Surname">
<select id="new_participant_role">
<option>Parent</option>
<option>Child</option>
</select>
<button id="add_new_participant">Add New Entry</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
자세히 보기: http://api.jquery.com/on/
이 문제는 언급된 대로 다음을 사용하여 해결할 수 있습니다..on
jQuery 1.7+ 버전에서 사용할 수 있습니다.
유감스럽게도 이 코드는 제 코드 내에서 작동하지 않았기 때문에 (나는 1.11을 가지고 있습니다.
$('body').delegate('.logout-link','click',function() {
http://api.jquery.com/delegate/
jQuery 3.0에서 .delegate()는 더 이상 사용되지 않습니다.jQuery 1.7부터 .on() 메서드로 대체되었기 때문에 이미 사용이 중단되었습니다.그러나 이전 버전의 경우 이벤트 위임을 사용하는 가장 효과적인 방법으로 남아 있습니다.이벤트 바인딩 및 위임에 대한 자세한 내용은 .on() 메서드를 참조하십시오.일반적으로 다음과 같은 두 가지 방법에 대한 템플릿이 있습니다.
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );
이 의견은 다른 사람들에게 도움이 될 수 있습니다 :)!
사용해 보십시오.
jQuery 버전 1.7+에서 on() 메서드는 bind(), live() 및 delegate() 메서드의 새로운 대체입니다.
그래서 이것을 더하면,
$(document).on("click", "a.new_participant_form" , function() {
console.log('clicked');
});
여기 도움이 될 수 있는 솔루션이 있습니다. **
// Changed to delegate() method to use delegation from the body
$("body").delegate("#boundOnPageLoaded", "click", function(){
alert("Delegated Button Clicked")
});
$(document).on("click", '.mylink', function(event) {
alert("new link clicked!");});
언급URL : https://stackoverflow.com/questions/15420558/jquery-click-event-not-working-after-append-method
'source' 카테고리의 다른 글
두 배열의 값이 동일한지 확인하는 방법 (0) | 2023.08.30 |
---|---|
2차 활동에서 1차 활동으로 데이터를 전달하는 방법은? - Android (0) | 2023.08.30 |
데이터 프레임 목록을 다중 시트 Excel 스프레드시트에 저장 (0) | 2023.08.30 |
jQuery ajax 성공 오류 (0) | 2023.08.30 |
헤더 서명이 잘못되었습니다. Excel 문서에 Apache POI가 있는 IO 예외 (0) | 2023.08.25 |