jquery trigger event on a bind element

Question

post update to show actual code being used, also one of the comments was public is not valid in jquery, if so i should just drop public when creating functions?

I have a simple viewing page that consists of a master and a number of detail records.

the script looks like the following:

$(document).ready(function(){
initialise();

    $("#order_list").on("dblclick",".show_order",function(){

    alert('click event initiated for show_order');

    });

    function initialise(){

    $('#order_list').empty();
    $('#drop_list').empty();
    $('#info').empty();

    var drop_id = "<?php echo $this_drop ?>";

    $.post('<?php echo site_url("schedules/get_drop");?>',{'drop_id':drop_id},
    function(response){
        $.each(response,function(key,val){
            drop_info = '';
            drop_info += 'DROP ID: ' + val.drop_id + '</br>';
            drop_info += 'DELIVERY POINT: '+val.destination + '</br>';
            drop_info += 'NO OF ORDERS: ' + val.noOfOrders + '       ' + 'ESTIMATED WEIGHT: ' + val.weight + '        ' + ' ESTIMATED TRAVEL DISTANCE: '+ parseFloat(val.distance)+ ' KM';
        $('#drop_info').empty();
        $('#drop_info').append(drop_info);      
        });

    },'json');

    //populate matching order info
    $.post("<?php echo site_url('schedules/get_drop_orders');?>",{'drop_id':drop_id},
    function(data){
        $.each(data,function(key,val){
            content = '';
            content += "<div class='show_order' id='"+val.order_id+"' data-weight='"+val.est_weight+"' data-qty='"+val.qty+"' data-distance='"+val.est_distance+"' data-origin='"+val.s1lat+','+val.s1lon+"' data-destination='"+val.s2lat+','+val.s2lon+"'>";
            content += "<a href='#' id='"+val.order_id+"'> Order No: "+val.order_id+"</a>&nbsp;&nbsp;&nbsp;Collection Date: "+val.req_col_time.substr(0,10)+"</br>";
            content += "Collection Point: <a href='#' id='"+val.site1id+"'>"+val.collection+"</a></br>";
            content += "Delivery Point: <a href='#' id='"+val.site2id+"'>"+val.destination+"</a></br>";
            content += "</div>";

            $('#order_list').append(content);               
            });

    },'json');//end of post loop

    $("#order_list").trigger("dblclick");
}

});
</script>

playing with this i can get the click to trigger on the appended elements but i cannot get the click to trigger from the initialize event for some reason

Answer 1

it is because the event handler is added after the event is triggered

$(document).on('click', '.show_order', function () {
    console.log('i was clicked', this);
});
//call the initialise function to populate the info through ajax calls
initialise();

function initialise() {
    var content = '';
    content += '<div class="show_order" id="dynamically generated">item 1</div>';
    content += '<div class="show_order" id="dynamically generated">item 2</div>';
    content += '<div class="show_order" id="dynamically generated">item 3</div>';
    $('body').append(content);
    $('.show_order').trigger('click');
}

Demo: Fiddle

In this case you need to use event delegation because when the event handler is registered the target elements are not yet added to the dom

Answer 2

Try this,

$(document).ready(function () {
    //call the initialise function to populate the info through ajax calls
    initialise();

    function initialise() {
        var content = '';
        content += '<div class="show_order" id="dynamically generated">item 1</div>';
        content += '<div class="show_order" id="dynamically generated">item 2</div>';
        content += '<div class="show_order" id="dynamically generated">item 3</div>';

        $('body').append(content);
        $('body').on('click','.show_order',function(){
            alert('i was clicked');                   
        });
        $('.show_order').trigger('click');
    }
});

FIDDLE

Answer 3

Try this

    initialise();
function initialise(){

  content = '';
  content += '<div class="show_order" id="dynamically generated">item 1</div>';
  content += '<div class="show_order" id="dynamically generated">item 2</div>';
  content += '<div class="show_order" id="dynamically generated">item 3</div>';

  $('body').append(content);
  $(document).on('click','.show_order',function(){
   alert('i was clicked');
  });
  $('.show_order').trigger('click');
}

DEMO

Answer 4

try something like this, FIDDLE

$('body').on('click', '.show_order', function () {
    alert('i was clicked');
});
initialise();

Answer 5

Give some timeout to the initialize function so that before the function is called, the dom is loaded and the click event is bind to the element

Check Out this Fiddle

Try this

$(document).ready(function(){

setTimeout(function(){initialise();},100);

$('body').on('click','.show_order',function(){    

alert('i was clicked');
});

function initialise(){

content = '';
content += "<div class='show_order' id='dynamically generated'>item 1</div>";
content += "<div class='show_order' id='dynamically generated'>item 2</div>";
content += "<div class='show_order' id='dynamically generated'>item 3</div>";

$('body').append(content);

$('.show_order').trigger('click');
}

});