Question

我将点击事件绑定到动态创建的元素。这是我的动态元素创建方法。

ajaxCall("/getItems","POST",data,function(result){
    var element = $('.item').first();
    $('#item-list-section').empty();

    for(var i = 0; i < result.items.length; i++){
        var clone = element.clone();

        clone.attr("id", result.items[i].itemId);
        clone.find('.item-price').html("<h4>25</h4>");
        if(result.items[i].itemName.length > 20){
            clone.find('.item-name').css('overflow','hidden');
            clone.attr('title', result.items[i].itemName )
        }
        clone.find('.item-name').html("<h4>"+ result.items[i].itemName + "</h4>");

        clone.on('click',function(){
            showToolTip();
        });

        clone.draggable({
            revert : false,
            zIndex: 1,
            containment: "window",
            opacity: 0.5,
            cursor: "move",
            helper: function() { return $(this).clone().appendTo('body').show(); }
        });
        $('#item-list-section').append(clone);
    }
});

这是点击事件功能！

function showToolTip(){
    $newDiv = $('<div></div>');
    $newDiv.css("display", "none");
    $newDiv.addClass('tooltip');
    $newDiv.append('adfhadfhadfhadfh')
    $newDiv.appendTo("body");
    $newDiv.fadeIn().css(({ left:  e.pageX, top: e.pageY }));
}

我使用了firebug调试点，但它没有脱离点击功能！绑定点击事件的方式是错误的！

Answer 1

替换您的代码：

clone.on('click',function(){

用这个：

$(document).on('click', '#' + result.items[i].itemId, function(){

参考：Understanding Event Delegation

Answer 2

如果您将click事件处理程序添加到'#item-list-section'循环之外的for元素，它将触发动态创建的元素：

$('#item-list-section').on('click', 'element', function() { ... });

您可以像往常一样用克隆元素类型或任何标识类替换element。例如，如果您的克隆元素为<div class="myDiv">，则可以使用'div'或'.myDiv'等。

例如，如果您的标记最终类似于：

<div id="item-list-section">
    <div class="myClonedElement"></div>
    <div class="myClonedElement"></div>
    <div class="myClonedElement"></div>
</div>

您可以使用以下命令将click事件绑定到克隆元素容器：

$('#item-list-section').on('click', '.myClonedElement', function() {
    showTooltip();
});

这样，您无需为每个克隆元素创建新的单击事件处理程序。你有一个适合所有人。

JSFiddle example

Answer 3

您确定原始对象还没有定义点击回调吗？

尝试：

clone.unbind("click");

在设置回叫之前

onclick方法不起作用

3 个答案: