[JQUERY] jQuery를 어떻게 동적으로 추가 HTML 요소에 이벤트를 onclick을 결합하여 [중복]

jQuery를 어떻게 동적으로 추가 HTML 요소에 이벤트를 onclick을 결합하여 [중복]

해결법

1. ---

   1.첫 번째 문제는 두 개 이상의 요소와 jQuery를 세트 APPEND 호출 할 때, 추가 할 요소의 복제가 각각 생성되고, 따라서 연결된 이벤트 관찰자가 손실된다는 점이다.

   첫 번째 문제는 두 개 이상의 요소와 jQuery를 세트 APPEND 호출 할 때, 추가 할 요소의 복제가 각각 생성되고, 따라서 연결된 이벤트 관찰자가 손실된다는 점이다.

   그것을 할 수있는 또 다른 방법은 각 요소에 대한 링크를 작성하는 것입니다 :

   function handler() { alert('hello'); }
   $('.add_to_this').append(function() {
     return $('<a>Click here</a>').click(handler);
   })
   

   또 다른 잠재적 인 문제는 요소가 DOM에 추가되기 전에 이벤트 관찰자가 연결되어 있는지 수 있습니다. 나는 확실하지이 말이 무엇이든이있는 경우 해요,하지만 난 행동이 결정되지 않은 것으로 간주 될 수있다 생각합니다. 더 단단한 접근 방법은 아마도 다음과 같습니다

   function handler() { alert('hello'); }
   $('.add_to_this').each(function() {
     var link = $('<a>Click here</a>');
     $(this).append(link);
     link.click(handler);
   });
   

2. ---

   2.이 모든 방법은 사용되지 않습니다. 당신은 당신의 문제를 해결하는 방법에 사용해야합니다.

   이 모든 방법은 사용되지 않습니다. 당신은 당신의 문제를 해결하는 방법에 사용해야합니다.

   당신이 동적으로 추가 요소를 대상으로 할 경우에 당신은 사용해야합니다

   $(document).on('click', selector-to-your-element , function() {
        //code here ....
   });
   

   이 사용되지 않는 .live () 메소드를 대체합니다.

3. ---

   3.어떻게 라이브 방법에 대해?

   어떻게 라이브 방법에 대해?

   $('.add_to_this a').live('click', function() {
       alert('hello from binded function call');
   });
   

   그것은 작동해야처럼 아직도, 당신은 외모에 대해 무슨 짓을했는지. 꽤 비슷 또 다른 포스트가 있습니다.

4. ---

   4.조금 늦게 파티에하지만 난 jQuery를 이벤트 핸들러에 몇 가지 일반적인 오해를 정리하려고 거라 생각 했어요. jQuery를 1.7으로 CSTE 연구진 ()는 이벤트 핸들러를 지정하면 동적으로 어떤 시점에서 생성 된 소자에 이벤트 핸들러를 위임하는 대신 중단 된 .live ()로 사용되어야한다.

   조금 늦게 파티에하지만 난 jQuery를 이벤트 핸들러에 몇 가지 일반적인 오해를 정리하려고 거라 생각 했어요. jQuery를 1.7으로 CSTE 연구진 ()는 이벤트 핸들러를 지정하면 동적으로 어떤 시점에서 생성 된 소자에 이벤트 핸들러를 위임하는 대신 중단 된 .live ()로 사용되어야한다.

   즉, 구문이 약간 다르기 때문에에 대한 라이브 전환하는 간단하지 않다 말했다 :

   새로운 방법 (실시 예 1)

   $(document).on('click', '#someting', function(){
   
   });
   

   사용되지 않는 방법 (실시 예 2)

   $('#something').live(function(){
   
   });
   

   상술 한 바와 같이, 차이가있다. 트위스트 JQuery와 함수 자체 셀렉터를 통과하여, ()라는 사실과 유사 할 수있다 (하기 .live) CSTE 연구진이다 :

   예 3 :

   $('#something').on('click', function(){
   
   });
   

   그러나, 실시 예 1과 $ (문서)을 사용하지 않고, 실시 예 3은 동적으로 생성 된 요소를 사용할 수 없습니다. 당신이 동적 위임이 필요하지 않을 경우 예를 들어 3 절대적으로 괜찮습니다.

   그것은 작동하지만 당신은 동적 위임가 필요하지 않은 경우 예를 들어 1은 브라우저에서 약간 더 많은 작업을 필요로하기 때문에, 그것은 사용 예 3에 더 적합 할 것입니다. 이 성능에 실제적인 영향 일 수 있지만, 그것은 당신의 사용을위한 가장 적절한 방법을 사용하는 의미가되지 않습니다.

   꼭 그렇지는 않습니다. 다음은 예 3 단지 바로 가기입니다 :

   $('#something').click(function(){
   
   });
   

   위는 완벽하게 유효하고, 그래서 더 동적 위임이 필요하지 않을 경우 어떤 방법을하면 사용으로 정말 개인적인 취향의 문제이다.

   참고 :

5. ---

   5.이걸 고려하세요:

   이걸 고려하세요:

   jQuery(function(){
     var close_link = $('<a class="" href="#">Click here to see an alert</a>');
         $('.add_to_this').append(close_link);
         $('.add_to_this').children().each(function()
         {
           $(this).click(function() {
               alert('hello from binded function call');
               //do stuff here...
           });
         });
   });
   

   당신이 모든 특정 요소에 첨부 때문에 작동합니다. 는 DOM에 링크를 추가 한 후 - - 명시 적으로 DOM에 JQuery와 요소와 결합 그것에 클릭 이벤트로 추가 된 요소를 선택하는 방법을 찾기 위해 당신이 필요로하는 이유입니다.

   가장 좋은 방법은 아마 될 것 - 제안 - 라이브 방법을 통해 특정 클래스에 바인딩 할 수 있습니다.

6. ---

   6.요소와 함께 클릭 이벤트를 만들 수 때로는 필요하다. 바인딩을 기반으로 선택이 옵션을 선택하지 않습니다 때, 예를 들면이다. 핵심 부분은 토비아스가 하나의 요소에 .replaceWith ()를 사용하여에 대해 얘기했다하는 문제를 방지하는 것입니다. 이 개념의 단지 증거합니다.

   요소와 함께 클릭 이벤트를 만들 수 때로는 필요하다. 바인딩을 기반으로 선택이 옵션을 선택하지 않습니다 때, 예를 들면이다. 핵심 부분은 토비아스가 하나의 요소에 .replaceWith ()를 사용하여에 대해 얘기했다하는 문제를 방지하는 것입니다. 이 개념의 단지 증거합니다.

   <script>
       // This simulates the object to handle
       var staticObj = [
           { ID: '1', Name: 'Foo' },
           { ID: '2', Name: 'Foo' },
           { ID: '3', Name: 'Foo' }
       ];
       staticObj[1].children = [
           { ID: 'a', Name: 'Bar' },
           { ID: 'b', Name: 'Bar' },
           { ID: 'c', Name: 'Bar' }
       ];
       staticObj[1].children[1].children = [
           { ID: 'x', Name: 'Baz' },
           { ID: 'y', Name: 'Baz' }
       ];
   
       // This is the object-to-html-element function handler with recursion
       var handleItem = function( item ) {
           var ul, li = $("<li>" + item.ID + " " + item.Name + "</li>");
   
           if(typeof item.children !== 'undefined') {
               ul = $("<ul />");
               for (var i = 0; i < item.children.length; i++) {
                   ul.append(handleItem(item.children[i]));
               }
               li.append(ul);
           }
   
           // This click handler actually does work
           li.click(function(e) {
               alert(item.Name);
               e.stopPropagation();
           });
           return li;
       };
   
       // Wait for the dom instead of an ajax call or whatever
       $(function() {
           var ul = $("<ul />");
   
           for (var i = 0; i < staticObj.length; i++) {
               ul.append(handleItem(staticObj[i]));
           }
   
           // Here; this works.
           $('#something').replaceWith(ul);
       });
   </script>
   <div id="something">Magical ponies ♥</div>
   

7. ---

   7.

       function load_tpl(selected=""){
           $("#load_tpl").empty();
           for(x in ds_tpl){
               $("#load_tpl").append('<li><a id="'+ds_tpl[x]+'" href="#" >'+ds_tpl[x]+'</a></li>');
           }
           $.each($("#load_tpl a"),function(){
               $(this).on("click",function(e){
                   alert(e.target.id);
               });
           });
       }
   

8. ---

   8.나는 그것을 할 수있는 좋은 방법을 생각 :

   나는 그것을 할 수있는 좋은 방법을 생각 :

   $('#id').append('<a id="#subid" href="#">...</a>');
   $('#subid').click( close_link );
   

9. ---

   9.

   <html>
   <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
   <script>
       $(document).ready(function(){
           $(document).on('click', '.close', function(){
               var rowid='row'+this.id;
               var sl = '#tblData tr[id='+rowid+']';
               console.log(sl);
               $(sl).remove();
           });
           $("#addrow").click(function(){
               var row='';
               for(var i=0;i<10;i++){
                   row=i;
                   row='<tr id=row'+i+'>'
                       +   '<td>'+i+'</td>'
                       +   '<td>ID'+i+'</td>'
                       +   '<td>NAME'+i+'</td>'
                       +   '<td><input class=close type=button id='+i+' value=X></td>'
                       +'</tr>';
                   console.log(row);
                   $('#tblData tr:last').after(row);
               }
           });
       });
   
   </script>
   </head>
     <body>
       <br/><input type="button" id="addrow" value="Create Table"/>
       <table id="tblData" border="1" width="40%">
           <thead>
           <tr>
               <th>Sr</th>
               <th>ID</th>
               <th>Name</th>
               <th>Delete</th>
           </tr>
           </thead>
       </table>
       </body>
    </html>
   

from https://stackoverflow.com/questions/1525664/jquery-how-to-bind-onclick-event-to-dynamically-added-html-element by cc-by-sa and MIT license