1

我在动态生成的表上触发 .on 时遇到问题。我有我的代码设置，因此它会在页面加载时动态填充一个带有表格的 div。我将图像用作图标，由于某种原因，当用户单击图标时，我无法触发 .on 。

我拥有的 ajax 代码运行良好，并用所需的信息填充了我的 div。这是返回 .on 应该使用的数据的 php 文件：

（我是 jquery 的新手，只是一个爱好程序员！）

这是ajax代码：

   $.ajax({url: "load_agency_list.php",  
        data: "query=SELECT * FROM manual.agency_list",     
        type: "POST",
        success: function(data){  

         //when user clicks info display Agency Information
        $("#agency_list_window").html(data);
}
});

// start of .php file //

<table id="agency_table" class="inputtable ui-widget-content">
<th class="tbl_title_item"></th><th class="tbl_title_item">Agency Name:
</th><th class="tbl_title_item">V</th><th class="tbl_title_item">E</th>
<th class="tbl_title_item">D</th>



<?php
include("/includes/serv_connect.php");


$query = '';

if(!isset($_POST['query'])) 
{
    echo("Sorry there was a problem loading the agency list.");
    exit;
}
else
{
    $query = mysql_escape_string($_POST['query']);

}

$getitems = mysql_query($query,$link);
while($eachrow = mysql_fetch_array($getitems, MYSQL_ASSOC))
      {      
        echo("<tr class=\"tbl_item_format\">
<td>{$eachrow["agency_id"]}</td><td style=\"width: 400px\">{$eachrow["agency_name"]}</td>
<td>
<img alt=\"{$eachrow['agency_id']}\" class=\"ui-icon ui-icon-info agencyitem\"    src=\"/img/blank.png\"></td>
<td><img alt=\"{$eachrow['agency_id']}\" src=\"/img/blank.png\" title=\"Edit Agency Information\" 
class=\"ui-icon ui-icon-wrench editagencyitem\"></td>
<td><img alt=\"{$eachrow['agency_id']}\" src=\"/img/blank.png\" class=\"delagency ui-icon ui-icon-trash\"></td></tr>");
      }

?>
</table>

//结束php文件。

现在，当单击信息图标图像时，主文件中的代码应该会触发。

$('#agency_table').on('click','.agencyitem',function() {
  ...some stuff here
});

现在我尝试缩小我的选择器，如 $("#agency_table tr td .agencyitem)... 等等，但没有。

我尝试了各种解决方案都没有成功。任何帮助，将不胜感激。

谢谢！

4

2 回答 2

1

试$("#agency_list_window").on('click','.agencyitem',function() {...

顺便说一句。您应该停止使用 mysql_* 函数，因为它们已被弃用。您应该考虑改用 mysqli_* 或 PDO。此外，使用表格进行布局......阅读它。

于 2013-08-18T23:46:11.043 回答
0

由于您正在使用.ajax()并被agencyitem创建为响应，因此您的.on('click')方法需要在您success: function(){*data first in here*/}之后发生，data否则它是未定义的。换句话说，您的 HTML 尚未创建，因此您无法分配该.on()方法。尝试：

$.ajax({
  url: 'load_agency_list.php',  
  data: 'query=SELECT * FROM manual.agency_list',     
  type: 'POST',
  success: function(data){  
    $("#agency_list_window").html(data);
    // run your `.on()` method here
  }
});
于 2013-08-18T23:50:58.097 回答