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

There is no public function in javascript, that's a syntax error — adeneo
– adeneo, Commented Jan 8, 2014 at 10:22
content += "<div class='show_order' ... </div>" Observe quotes — Sachin Jain
– Sachin Jain, Commented Jan 8, 2014 at 10:23

Arun P Johny · Accepted Answer · 2014-01-08 10:23:02Z

3

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

answered Jan 8, 2014 at 10:23

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

4 Comments

Arun P Johny Over a year ago

commons guys the solution which used setTimeout() got 2 upvotes where this got a downvote after being the first to solve it

Terence Bruwer Over a year ago

so far the trigger is getting fired off thank you all, problem now stands that it must only fire once on the initialise and not for every element appended

Arun P Johny Over a year ago

@TerenceBruwer after initializing for which element it has to be fired

Arun P Johny Over a year ago

@TerenceBruwer out of all the newly added elements for which one you want to trigger the event

Pranav C Balan · Accepted Answer · 2014-01-08 11:16:07Z

1

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

edited Jan 8, 2014 at 11:16

answered Jan 8, 2014 at 10:23

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

2 Comments

Arun P Johny Over a year ago

the question is why $('.show_order').trigger('click'); is not working

Arun P Johny Over a year ago

that is entirely different from your initial answer.... I was saying your initial answer was wrong - it was nowhere close to an answer

rajesh kakawat · Accepted Answer · 2014-01-08 10:33:01Z

0

try something like this,FIDDLE

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

answered Jan 8, 2014 at 10:33

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

2 Comments

Terence Bruwer Over a year ago

i ran the fiddle the trigger gets fired for every element appended sorry

rajesh kakawat Over a year ago

that because $('.show_order') will get three element,so three event are fired

Furquan Khan · Accepted Answer · 2014-01-08 10:33:41Z

0

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

});

answered Jan 8, 2014 at 10:33

Furquan Khan

1,5941 gold badge15 silver badges30 bronze badges

Comments

Sridhar R · Accepted Answer · 2014-01-08 10:57:41Z

0

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

edited Jan 8, 2014 at 10:57

answered Jan 8, 2014 at 10:28

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Collectives™ on Stack Overflow

jquery trigger event on a bind element

5 Answers 5

4 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related