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

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

javascript jquery

Javascript 绑定元素上的jquery触发器事件,javascript,jquery,Javascript,Jquery,发布更新以显示正在使用的实际代码，并且其中一条注释was public在jquery中无效，如果是这样，我应该在创建函数时删除public吗我有一个简单的查看页面，其中包括一个主记录和一些详细记录脚本如下所示： $(document).ready(function(){ initialise(); $("#order_list").on("dblclick",".show_order",function(){ alert('click event initiated fo

发布更新以显示正在使用的实际代码，并且其中一条注释was public在jquery中无效，如果是这样，我应该在创建函数时删除public吗

我有一个简单的查看页面，其中包括一个主记录和一些详细记录

脚本如下所示：

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

$（文档）.ready（函数（）{
初始化（）；
$（“#顺序_列表”）。在（“dblclick”，“show_order”，function（）上{
警报（“为显示订单启动的点击事件”）；
});
函数初始化（）{
$（“#订单列表”）.empty（）；
$（“#下拉列表”）.empty（）；
$（'#info'）.empty（）；
var-drop_id=“”；
$.post（“”，{'drop\u id'：drop\u id}，
功能（响应）{
$。每个（响应、功能（键、val）{
drop_info=''；
drop_info+=“drop ID:”+val.drop_ID+”
；
drop_info+=“交货地点：”+val.destination+”
；
drop_info+='订单数量：'+val.noOfOrders+'''+'估计重量：'+val.WEIGHT+''+'估计行程距离：'+parseFloat（val.DISTANCE）+'KM'；
$（'drop#u info'）.empty（）；
$（'drop#u info'）。追加（drop#u info）；
});
}“json”）；
//填充匹配的订单信息
$.post（“，{'drop\u id'：drop\u id}），
功能（数据）{
$。每个（数据、函数（键、值）{
内容=''；
内容+=”；
内容+=“收集日期：”+val.req\u col\u time.substr（0,10）+“
”；
内容+=“收集点：
”；
内容+=“交付点：
”；
内容+=”；
$（“#订单列表”）。追加（内容）；
});
}，'json'）；//post循环结束
$（“#订单列表”）.trigger（“dblclick”）；
}
});

使用此功能，我可以在附加的元素上获得单击触发，但由于某些原因，我无法从初始化事件中获得单击触发，这是因为事件处理程序是在触发事件后添加的

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

$（文档）。在（'单击'，'上。显示命令'，函数（）{
log（'我被点击了'，这个）；
});
//调用initialise函数，通过ajax调用填充信息
初始化（）；
函数初始化（）{
var内容=“”；
内容+=‘第1项’；
内容+=‘第2项’；
内容+=‘第3项’；
$（'body'）。追加（内容）；
$（'.show_order'）。触发器（'click'）；
}

演示：

在这种情况下，您需要使用事件委派，因为在注册事件处理程序时，目标元素尚未添加到dom中，这是因为事件处理程序是在触发事件后添加的

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

$（文档）。在（'单击'，'上。显示命令'，函数（）{
log（'我被点击了'，这个）；
});
//调用initialise函数，通过ajax调用填充信息
初始化（）；
函数初始化（）{
var内容=“”；
内容+=‘第1项’；
内容+=‘第2项’；
内容+=‘第3项’；
$（'body'）。追加（内容）；
$（'.show_order'）。触发器（'click'）；
}

演示：

在这种情况下，您需要使用事件委派，因为在注册事件处理程序时，目标元素尚未添加到dom中

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

$（文档）.ready（函数（）{
//调用initialise函数，通过ajax调用填充信息
初始化（）；
函数初始化（）{
var内容=“”；
内容+=‘第1项’；
内容+=‘第2项’；
内容+=‘第3项’；
$（'body'）。追加（内容）；
$（'body'）。在（'click'，'show_order'，function（）上{
警报（“我被点击”）；
});
$（'.show_order'）。触发器（'click'）；
}
});

试试这个

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

$（文档）.ready（函数（）{
//调用initialise函数，通过ajax调用填充信息
初始化（）；
函数初始化（）{
var内容=“”；
内容+=‘第1项’；
内容+=‘第2项’；
内容+=‘第3项’；
$（'body'）。追加（内容）；
$（'body'）。在（'click'，'show_order'，function（）上{
警报（“我被点击”）；
});
$（'.show_order'）。触发器（'click'）；
}
});

试试这个

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

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

});

初始化（）；
函数初始化（）{
内容=''；
内容+=‘第1项’；
内容+=‘第2项’；
内容+=‘第3项’；
$（'body'）。追加（内容）；
$（文档）。在（'单击'，'上。显示命令'，函数（）{
警报（“我被点击”）；
});
$（'.show_order'）。触发器（'click'）；
}

试试这个

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

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

});

初始化（）；
函数初始化（）{
内容=''；
内容+=‘第1项’；
内容+=‘第2项’；
内容+=‘第3项’；
$（'body'）。追加（内容）；
$（文档）。在（'单击'，'上。显示命令'，函数（）{
警报（“我被点击”）；
});
$（'.show_order'）。触发器（'click'）；
}

试试这样，

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

试试这样，

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

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

试试这个

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

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

$（文档）.ready（函数（）{ setTimeout（函数（）{initialise（）；}，100）； $（'body'）。在（'click'，'show_order'，function（）{ 警报（“我被点击”）； }); 函数初始化（）{ 内容=''；内容+=“第1项”；内容+=“第2项”；内容+=“第3项”； $（'body'）。追加（内容）； $（'.show_order'）。触发器（'click'）； } });
为initialize函数指定一些超时时间，以便在调用函数之前，加载dom并将click事件绑定到元素

试试这个

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

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

$（文档）.ready（函数（）{ setTimeout（函数（）{initialise（）；}，100）； $（'body'）。在（'click'，'show_order'，function（）{ 警报（“我被点击”）； }); 函数初始化（）{ 内容=''；内容+=“第1项”；内容+=“第2项”；内容+=“第3项”； $（'body'）。追加（内容）； $（'.show_order'）。触发器（'click'）； } });
javascript中没有公共函数