Javascript JQuery不适用于外部html

单击按钮后，我需要创建几个div元素。所以我决定在外部文件中创建类似模板的东西，并使用jquery将其附加到headdiv标记中

$('.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>

如何解决此问题。

尝试以下方法：

$('.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'
    });
});

希望这会有所帮助：）

使用事件委派

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

---

对于动态事件，请使用事件委派进行编写，如：

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

---

请尝试使用on ready函数中的事件。。相信我，它会正常工作的

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

---

请尝试这种方式。

使用事件委派…

$（“#房间位置”）。在（'click'，'.down arrow'，function（）{…}）

感谢您的帮助。现在正在工作在我的情况下不工作请检查您的浏览器控制台是否显示任何错误？。。确保代码中包含jquery min文件。

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