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上使用click事件时不起作用。所以我需要使用一些事件，比如点击，可以从jquery ui中拖动等等。

但是当我需要使用时：这个点击事件然后为附加的html工作

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

我该如何解决这个问题。

Answer 1

试试这个：

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

对于动态事件，请使用事件委托来编写，如：

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

Answer 3

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

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

请尝试这种方式。

Answer 4

使用事件委托

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

JQuery不适用于外部html

4 个答案: