CODEWITHSUNDEEP
javascriptjqueryhtmleventsdelegates
Naveen Singh
Naveen Singh

Reputation: 405

How to implement manual click event on dynamically generated element

i have a mainbox inside which some more boxes are dynamically generated.

// first time retrive
$.post("dataretrive.php", {
    }, function(data, status) {
        document.getElementById('mainbox').innerHTML = data;
        timer();
    });

then on click on these subboxes some i am implementing some functionality

$('.boxes-main').unbind('click').on('click', '.subbox', function(e){
    var value1 = $(this).attr('data');
    var value2 = $(this).attr('data2');
    var value3 = $(this).attr('data3');
    var value11 = $(this).attr('data4');
    var value12 = $(this).attr('data5');
    var value13 = $(this).attr('data6');
...... // some more functionality with these data which i think doesn't matter for this question for this question
    });

As i want to implement shortcuts to these subbox like when user press 1 it trigger a click event on that box. I also have ID's associated with that. like box1 , box2, box3 and so on. and i am trying to put a click event of that box when key 1 is pressed.

$(document).keypress(function(e) {
  if(e.charCode == 49) {
$('#box1').click();
  }
});

I had also tried trigger function , $("boxes-main #box1').click(); but nothing works because contents are dynamically generated. someone tell me please how to implement manual click event on dynamically generated element.

and don't get confused between boxes-main and mainbox both are class and id of same div element.

Upvotes: 0

Views: 59

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

Based on your comment:

and don't get confused between boxes-main and mainbox both are class and id of same div element.

It is not the click generation that is broken, but you are targeting the wrong ancestor in your delegated click event handler. Go higher up the ancestors to a non-changing element. document is the best default if nothing else is closer.

$(document).on('click', '.subbox', function(e){

Notes:

  • Don't mix bind with on. Use off instead
  • You don't need off/unbind at all in this example

Upvotes: 1

Related Questions