외부 HTML에 대해 JQuery가 작동하지 않습니다.

Question

버튼을 클릭 한 후 몇 개의 div 요소를 만들어야합니다. 그래서 외부 파일에 템플릿과 같은 것을 만들고 jquery를 사용하여 머리 div 태그를 추가하기로 결정했습니다.

$('.socket-element').on('click', function (e) { 
$.ajax({ 
    url: '/my-site/tags/socket-box.php', 
    success: function (data) { $('#room-place').append(data); }, 
    dataType: 'html' 
    }); 
}); 

그리고 내 외부 HTML 파일 : 그럼이 코드가 잘 작동

<div class="socket-box room-box-element col-xs-2 ui-draggable ui-draggable-handle"> 
<div class="row"> 
    <div class="row"> 
     <div class="box-header col-xs-12"> 
      <div class="row"> 
       <div class="col-xs-2"> 
        <img class="down-arrow" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png" width="14" height="18" /> 
       </div> 
       <div class="col-xs-8"> 
        <h6>Temperature</h6> 
       </div> 
       <div class="col-xs-2"> 
        <img class="settings" src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/settings-24-128.png" width="18" height="18" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>     
<div class="row"> 
    <div class="row"> 
     <div class="box-content col-xs-12"> 
      <div class="row"> 
       Test 
      </div> 
     </div> 
    </div> 
</div> 

원래 HTML 파일의 외부 HTML을 추가하지만 내가 사용 할 때 추가에 이벤트를 클릭 html이 작동하지 않습니다. 이 클릭 이벤트를 한 후, 추가 된 HTML을 위해 내가이 문제를 해결하려면 어떻게

$('.down-arrow').click(function (e) { 
    alert('Test'); 
}); 

을 작동하지 않습니다 : 내가 사용해야 할 때 그래서 나는 JQuery와 UI 등

그러나에서 드래그 클릭과 같은 몇 가지 이벤트를 사용할 필요가 문제.

Answer 1

을 같이 이벤트 위임을 사용하여 쓰기 않습니다

$(document).on("click",".down-arrow",function(){ 
//write your code here 
}) 

Answer 2

이 시도 :

$('.socket-element').on('click', function (e) { 
$.ajax({ 
    url: '/my-site/tags/socket-box.php', 
    success: function (data) { 

    $('#room-place').append(data); 
    $('#room-place').ready(function(){ 
     $('.down-arrow').click(function (e) { 
     alert('Test'); 
     }); 
    }); 
    }, 
    dataType: 'html' 
    }); 
}); 

희망이 도움이됩니다 :)

Answer 3

사용 이벤트 위임 동적 이벤트의

$(document).on('click', '.down-arrow',function(e){ 
}); 

Answer 4

Ple ase on ready function 내부에서 이벤트를 사용하십시오. 제대로 작동하는지 믿어주십시오.

$(document).ready(function(){ 
    $('.down-arrow').click(function (e) { 
     alert('Test'); 
    }); 
}); 

이 방법을 시도해보십시오.