0

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

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 }));
}

我使用了萤火虫调试点，但它并没有中断点击功能！我绑定点击事件的方式是错误的！

4

3 回答 3

1

替换您的代码：

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

有了这个：

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

参考：了解事件委托

于 2013-06-03T08:40:11.057 回答
1

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

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

在这里，您可以像往常一样替换element为克隆的元素类型或任何标识类。例如，如果您的克隆元素是<div class="myDiv">，您可以使用'div'or'.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 示例。

于 2013-06-03T08:41:17.533 回答
0

您确定原始对象尚未定义点击回调吗？

尝试：

clone.unbind("click");

在设置回调之前

于 2013-06-03T08:43:39.933 回答