表格单元格未触发jQuery模糊事件
[英]jQuery blur event not fired for table cell
问题描述
I'm loading a table dynamically using jQuery ajax, the rows of the table has "contenteditable=true", I'm trying to listen on blur event for every cell, so that it triggers a function to update that cell dynamically. 
我正在使用jQuery ajax动态加载表，表的行具有“ contenteditable = true”，我试图监听每个单元格的模糊事件，以便它触发一个函数来动态更新该单元格。 The problem is that the event blur isn't fired at all, I've tried different selectors(table,tbody, and finally the whole document), but all in vain. 问题是事件模糊根本没有触发，我尝试了不同的选择器（表，正文，最后是整个文档），但都没有用。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src='jquery-1.8.3.js'></script>
<link rel="stylesheet" href='jquery-ui-1.8.7.custom.css' type="text/css">
<?php
include './datatable_include.php';
?>
<script type="text/javascript">
$(function () {
$.ajax({//create an ajax request to load_page.php
type: "GET",
url: "load_table.php",
dataType: "html", //expect html to be returned
success: function (response) {
$('#dataTable').find('tbody').html(response);
initDataTable('#dataTable', null);
}
});
});
$(document).bind("blur", "td", (function () {
// this code isn't reached
alert("ahoo");
var id = $(this).attr("id");
var name = $(this).attr("name");
var message_status = $("#status");
var value = $(this).text();
$.post('update_table.php', "id=" + id + "&" + name + "=" + value, function (data) {
if (data != '')
{
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function () {
message_status.hide()
}, 3000);
}
});
}));
</script>
</head>
<body>
<table id="dataTable" width="700px" >
<thead>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
3 个解决方案
解决方案1
0 2015-11-04 14:46:24
try 尝试
$(document).bind("td").blur(function()
{
});
解决方案2
0 2015-11-04 15:14:33
seems that table td isn't a standard focusable element so you can't blur it. 表td似乎不是标准的可聚焦元素，因此您无法对其进行模糊处理。 try to add the tabsindex property to each td 尝试将tabsindex属性添加到每个td
<td tabindex="1">focus on me</td>
解决方案3
-1 2015-11-04 14:47:17
the definition of bind function is as follows: 绑定函数的定义如下：
.bind( eventType [, eventData ], handler )
so, you should do: 因此，您应该这样做：
$('td').bind('blur', function(){
//event handler statement goes here
});
And as mentioned by @paul roub in the comments above, you should be using live() function, as you are creating the td elements dynamically. 正如@paul roub在上面的评论中提到的那样，您应该使用live()函数，因为您正在动态创建td元素。
$('td').live('blur', function(){
//event handler statement goes here
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.