CODEWITHSUNDEEP
javascriptjquery
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5689

onclick method doesn't work

I'm binding click events to dynamically created elements. This is my dynamic element creation method.

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

This is the click event function! 

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

I used firebug debug points but it doesn't break from the click function! Is is wrong the way I bind the click event!

Upvotes: 0

Views: 307

Answers (3)

James Donnelly
James Donnelly

Reputation: 128856

If you add the click event handler to the '#item-list-section' element outside of your for loop, it will fire on dynamically created elements within:

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

Here you can replace element with the cloned element type or any identifying classes as you usually would. If your cloned element was <div class="myDiv">, for example, you could use 'div' or '.myDiv', etc.

For example, if your markup ended up being something like:

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

You could bind the click event to the cloned element container using:

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

This way you don't need to create a new click event handler for every cloned element. You have one which caters for all.

JSFiddle example.

Upvotes: 1

alberto-bottarini
alberto-bottarini

Reputation: 1231

Are you sure that original object has not a click callback already defined?

try:

clone.unbind("click");

before setting your callback

Upvotes: 0

palaѕн
palaѕн

Reputation: 73966

Replace your code:

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

with this:

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

Reference: Understanding Event Delegation

Upvotes: 1

Related Questions