jQuery триггерное событие на элементе связывания

Question

Опубликовать обновление, чтобы показать фактический код, используемый, также один из комментариев был общедоступным, недействителен в jquery, если так, я должен просто отказаться от публикации при создании функций?

У меня есть простая страница просмотра, состоящая из мастера и нескольких подробных записей.

сценарий выглядит следующим образом:

$(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> 

играть с этим я могу получить кнопку, чтобы вызвать на прилагаемых элементов, но я не могу получить кнопку, чтобы вызвать из события инициализации по какой-то причине

Answer 1

это происходит потому, что обработчик событий добавляется после того, как событие инициируется

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

Демо: Fiddle

В этом случае необходимо использовать делегирование событий, потому что, когда обработчик события регистрируется целевые элементы еще не добавлены к йоту

Answer 2

Try это,

$(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

Попробуйте это

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

попробовать что-то вроде этого, FIDDLE

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

Answer 5

Дайте некоторое время ожидания для функции инициализации так, что до того, как функция вызывается, дом загружен и событие щелчка связываются с элементом

Check Out this Fiddle

Попробуйте

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

});