CODEWITHSUNDEEP
javascriptjquery
Terence Bruwer
Terence Bruwer

Reputation: 239

jquery trigger event on a bind element

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

Upvotes: 0

Views: 511

Answers (5)

Pranav C Balan
Pranav C Balan

Reputation: 115212

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

Upvotes: 1

Sridhar R
Sridhar R

Reputation: 20408

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

Upvotes: 0

Furquan Khan
Furquan Khan

Reputation: 1594

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

});

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10896

try something like this,FIDDLE 

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 3

Related Questions