Question

我遇到动态生成的表上的.on触发问题。我有我的代码设置，所以它在页面加载时动态填充表格。我使用图像作为图标，出于某种原因，当用户点击图标时，我无法触发.on。

ajax代码我工作正常，并填写我的div所需的信息。这是一个php文件，它返回.on应该使用的数据：

（我是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”...等等，但没有。

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

谢谢！

Answer 1

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

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

Answer 2

由于您使用.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
  }
});

.on没有为动态列表触发

//结束php文件。

2 个答案: