FastAdmin 키 값 구성 요소가 동적으로 렌더링 된 후 버튼이 실패합니다. 그것을 해결하는 방법?

FastAdmin 키 값 구성 요소 (FieldList)의 동적 렌더링 문제에 대한 자세한 설명 및 솔루션 버튼 실패

FastAdmin의 Fieldlist를 사용하는 경우 JavaScript를 통해 구성 요소 컨텐츠를 동적으로 렌더링 한 후 새 버튼이 클릭 이벤트에 응답 할 수없는 경우 일반적으로 이벤트 바인딩 오류로 인해 발생합니다. 이 기사는이 문제를 심층적으로 분석하고 특히 Fastadmin 문서에 제공된 솔루션의 실패에 대한 효과적인 솔루션을 제공합니다.

문제의 근본 원인은 페이지가 처음로드 될 때 동적으로 추가 된 요소가 존재하지 않기 때문에 페이지에 바인딩 된 이벤트 리스너는 이러한 요소의 클릭 이벤트를 캡처 할 수 없습니다.

해결책 : 이벤트 대표 메커니즘을 사용하십시오. 이벤트 대의원은 이벤트 리스너를 부모 요소에 바인딩합니다. 이벤트가 부모 요소로 기포 될 때 이벤트 대상 요소가 조건을 충족하는지 여부를 결정하여 해당 이벤트 처리 기능을 트리거합니다.

다음 예제 코드는 jQuery를 사용하여 이벤트 대의원을 구현하여 FastAdmin 키 값 구성 요소 (FieldList)의 동적 렌더링 후 버튼 고장 문제를 해결합니다.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼 추가 예제</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

ID	중국 이름	영어 이름	조각 수	용량	총 체중	값 (USD)	작동하다
추가

$ (document) .ready (function () {
    $ (document) .on ( 'click', '.btn-append', function (event) {
        event.preventDefault ();
        // 새로운 요소 논리 추가 let newrow =`<tr>
                        <td>새로운 ID</td>
                        <td>새로운 중국 이름</td>
                        <td>새로운 영어 이름</td>
                        <td>새로운 수의 조각</td>
                        <td>새로운 볼륨</td>
                        <td>새로운 총 체중</td>
                        <td>새로운 가치 (USD)</td>
                        <td><a href="https://www.php.cn/link/b025cd6cde5038544af3b6bea29a7a5e" class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i> 제거하다</a></td>
                      </tr>`;;
        $ ( 'table.fieldList'). Append (Newrow);
    });

    // 바인딩 이벤트 $ (document) .on ( 'click', '.btn-remove', function (event) {
        event.preventDefault ();
        $ (this) .closest ( 'tr'). remove ();
    });
});

이 코드는 이벤트 리스너가 .btn-remove $(document).on('click', ...) 을 통해 document 개체에 대한 이벤트 리스너 .btn-append 바인딩합니다. 이것은 동적 렌더링 후 버튼 고장 문제를 효과적으로 해결합니다. 코드는 더 깨끗한 템플릿 문자열을 사용하여 새 라인을 만듭니다.

동적으로 추가 된 요소조차도 이벤트 위임을 통해 이벤트를 올바르게 처리 할 수 ​​있으므로 FastAdmin 키 값 구성 요소의 동적 렌더링 후 버튼 고장 문제를 해결할 수 있습니다.

위 내용은 FastAdmin 키 값 구성 요소가 동적으로 렌더링 된 후 버튼이 실패합니다. 그것을 해결하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!