外部のHTMLのためにJQueryが機能しない

Question

ボタンをクリックした後でdiv要素をいくつか作成する必要があります。だから、私は外部ファイルにテンプレートのようなものを作って、jqueryを使ってhead 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が動作していません。 は、だから私はjqueryのUIからドラッグなど

クリック、のようないくつかのイベントを使用する必要がありますしかし、私は使用する必要がある場合：このクリックイベントを、次に付加さhtmlのためにどのように私はこの問題を解決することができます

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

が動作していません問題。

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関数内のイベントを使用してみてください。正しく動作することを信頼してください。

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

この方法を試してください。