Question

发布更新以显示正在使用的实际代码，其中一条注释是public在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

给initialize函数一些超时，以便在调用函数之前加载dom并将click事件绑定到元素

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

});

绑定元素上的jquery触发器事件

5 个答案: