Question

这是数据加载dinamically

$('<tr id="data[i].id" class="pedido_row">').html("
<td bgcolor=\"#DDDDDD\">" + data[i].user_created + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].store_created + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].product_code + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].product_info + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].warehouse + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].cost_center + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].quantity + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].time_created + "</td>
<td bgcolor=\"#DDDDDD\"><input class=\"dispatch_pedido\" id=\"0\" type=\"button\" value=\"Despachar Pedido\" /></td>
").appendTo('#pedidos');

然后我用这段代码添加了点击事件

$(document).ready(function () {
    $(document).on('click', ".dispatch_pedido", function() {
        alert("hello world");        
    });
});

但它不适用于动态创建的ID，甚至不适用于最初在页面上加载的ID。

函数onclick适用于加载页面但不是动态数据的数据，因此我尝试使用ON来使两者都工作但我无法做到。

Answer 1

是的，请尝试将代码更改为此。

$(".dispatch_pedido").live('click', function(){
    // your code
});

我知道不推荐使用live（）方法，但是当使用动态创建的html元素时，事件不起作用。

Answer 2

根据我的理解，问题在于表行创建脚本。 您需要正确创建多行字符串

$('<tr id="data[i].id" class="pedido_row">').html("<td bgcolor=\"#DDDDDD\">" 
      + data[i].user_created 
      + "</td><td bgcolor=\"#DDDDDD\">" 
      + data[i].store_created 
      + "</td><td bgcolor=\"#DDDDDD\">"
      + data[i].product_code 
      + "</td><td bgcolor=\"#DDDDDD\">" 
      + data[i].product_info 
      + "</td><td bgcolor=\"#DDDDDD\">" 
      + data[i].warehouse 
      + "</td><td bgcolor=\"#DDDDDD\">" 
      + data[i].cost_center 
      + "</td><td bgcolor=\"#DDDDDD\">" 
      + data[i].quantity 
      + "</td><td bgcolor=\"#DDDDDD\">" 
      + data[i].time_created 
      + "</td><td bgcolor=\"#DDDDDD\">"+
      "<input class=\"dispatch_pedido\" id=\"0\" type=\"button\" value=\"Despachar Pedido\" />"+
      "</td> ").appendTo('#pedidos');

当您使用 jQuery 1.4 时，请使用 .live

$(".dispatch_pedido").live('click', function() {
    alert("hello world");        
});

Answer 3

当文档准备就绪时，您要添加click事件的元素不存在。

尝试：

$('<tr id="data[i].id" class="pedido_row">').html("
<td bgcolor=\"#DDDDDD\">" + data[i].user_created + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].store_created + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].product_code + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].product_info + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].warehouse + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].cost_center + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].quantity + "</td>
<td bgcolor=\"#DDDDDD\">" + data[i].time_created + "</td>
<td bgcolor=\"#DDDDDD\"><input class=\"dispatch_pedido\" id=\"0\" type=\"button\" value=\"Despachar Pedido\" /></td>
").appendTo('#pedidos');

$(".dispatch_pedido").click(function(){
    alert('waffles are awesome!')
});

Answer 4

添加动态html后立即调用：

 $('.dispatch_pedido').unbind('click');
 $(document).on('click', ".dispatch_pedido", function() {
        alert("hello world");        
    });

Answer 5


    if($('.dispatch_pedido').length > 0 )
       {
            $('.dispatch_pedido').click(function()
              {
                 //TO DO
              }
            );
      }

Answer 6

$(document).ready(); 这可能是因为您的DOM准备好就在您的页面准备就绪时。

onclick类不会触发动态数据

6 个答案: