在.append的AJAX数据之后用.on选择元素

时间:2014-05-21 20:22:00

标签: jquery

在.ajax()调用中使用.append动态添加元素后,我的.on(' click,' .order_notes' ,...)电话。

当我运行代码.on('点击',' .order_notes',...)时,它只会使用类&#注册我的3/4元素39; order_notes',所有这些都在生成的页面的底部。我应该能够点击的前1/4个元素,所有这些元素都在我生成的页面的顶部,不会注册。我想我遇到了竞争条件。任何人都可以提供一些有关正在发生的事情或如何解决这个问题的洞察力吗?

在文档加载上调用的函数:

function getOrders(){

$.ajax({                                      
  url: path+'/ajax/orders.php',          
  data: "",                        
  dataType: 'json',                   
  success: function(data){  

    $('#content').empty();

    var output = "";
    var currentDate = "";
    var keeper = 0;

    for (var i in data){

        var id = data[i]['id'];
        var tId = data[i]['transaction_id'];
        var shop = data[i]['store'];
        var type = data[i]['type'];
        var msg = data[i]['msg'];
        var timestamp = data[i]['timestamp'];

        var datetime = timestamp.split(" ");
        var date = datetime[0];
        var time = datetime[1];

       if(keeper == 0){
            output+="<div class=daily_order_record><b>" + date +"</b></br>";
            currentDate = date;
            keeper++;
        }

       if(currentDate != date && keeper != 0){
            output+="</div><div class=daily_order_record><b>" + date +"</b></br>";
            currentDate = date;
            keeper++;
        }

      output +="<p class=\"order_notes\" id=t_"+ tId +">" + time + "  " + shop + "  " + msg + "</p>"; 

  }

  $('#content').hide().append(output).fadeIn(500); 

  }

 });    
}

代码注册.on点击处理程序:

$(document).ready( function() {

  $(document).ajaxComplete(function() {
      $('html').on('click', '.order_notes', function(){

          alert("hi");
      });
  });

});

我试图注册的附加代码。在点击处理程序中使用相同的结果:

$(document).ready( function() {

  $('html').on('click', '.order_notes', function(){
      alert("hi");
  });

});

1 个答案:

答案 0 :(得分:2)

on event handler置于ajaxComplete回调之外,但仍在document.ready内。 on的想法是它将监听原始DOM创建/就绪点,包括此后的AJAX加载的所有元素:

$(document).ready(function() {
    $('html').on('click', '.order_notes', function() {
        alert('hi');
    });
    $(document).ajaxComplete(function() {
        // whatever else you do in your callback
    });
});

另一点需要注意的是,您当前正在将该点击处理程序分配给.order_notes元素中的html元素 - 这是一个非常大的范围,bubbling将在多个级别上发生。您可以使用#content div而不是html作为基础来缩小目标范围,以便您的事件处理程序:

$('#content').on('click', '.order_notes', function() {});