Bind click event function to a dynamically-created element

Question

I'm creating elements using an Ajax request. I want to bind a function to each element to run in its click event. How can I do this? Here is my code where I generate the elements.

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.mousedown(onItemClick(clone));
    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);
  }
});

Sushanth -- · Accepted Answer · 2013-06-03 06:40:15Z

2

Need to use event delegation Which attaches the events to the elements using the concept of event bubbling...

$(staticContainer).on("click", element , function(event){
  // Code here
});

staticContainer -- The element which is always present in the DOM. The closer it is to the dynamically created elements the better.

element - Dynamically created entity to which you want to attach the event

answered Jun 3, 2013 at 6:40

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harsha Venkataramu · Accepted Answer · 2013-06-03 06:34:46Z

0

$(clone).on("click", function(event){
  alert($(this).attr('id'));
});

Check this to find out if it alerts the id.

answered Jun 3, 2013 at 6:34

Harsha Venkataramu

2,9121 gold badge37 silver badges62 bronze badges

Comments

Suresh Atta · Accepted Answer · 2013-06-03 06:35:17Z

0

In each loop of elements

$(clone).each(function(index, value) { 
$(value).on("click", function(event){
  alert($(this).text());
});
}

answered Jun 3, 2013 at 6:35

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Comments

Amit Sharma · Accepted Answer · 2013-06-03 06:35:45Z

0

$(clone).bind("click",function(event){
// your code
});

Please try this.

answered Jun 3, 2013 at 6:35

Amit Sharma

1,2101 gold badge11 silver badges26 bronze badges

1 Comment

Harsha Venkataramu Over a year ago

on is the preferred method.

PSR · Accepted Answer · 2013-06-03 06:35:52Z

0

$(document).on("click",value, function(event){
  alert($(this).text());
});

answered Jun 3, 2013 at 6:35

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

user1823761 · Accepted Answer · 2013-06-03 06:46:39Z

0

One solution is using event delegation with .on() method:

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

Another solution is clone your element with events, just pass true to your .clone() method:

var clone = element.clone(true);

Note that this will work if your var element = $('.item').first(); is static on the page.

References:

.clone() - jQuery API Documentation
.on() - jQuery API Documentation

answered Jun 3, 2013 at 6:46

user1823761

Collectives™ on Stack Overflow

Bind click event function to a dynamically-created element

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related