綁定元素上的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

在這種情況下，你需要使用事件代表團，因爲當事件處理程序註冊的目標元素沒有被添加到DOM

Answer 2

試試這個，

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

給予一定的超時初始化函數，以便調用的函數之前，DOM是加載並單擊事件被綁定到元素

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

});