jQuery代码一部分的怪异行为

Question

好，开始吧。

此代码可以在控制台中正常运行，完成所需的操作。

$('#tasks-table input').parent().html($('#tasks-table input').siblings('textarea').val())

但在这样的调用中，它甚至不会执行。 控制台是静音的。 其他所有功能代码均正确执行

updateTask.call(this, 131)

有任何想法吗？

更新

这个

$('#tasks-table input').parent().html($('#tasks-table input').siblings('textarea').val())

是这个的一部分

updateTask.call(this, 131)

并在updateTask中被忽略，此指令可以从控制台正常工作，但在updateTask中时则不会

html是一个4行php生成的表，具有典型的一行

<tr>
  <td><?php echo $task->id ?></td>
  <td onclick='projects.editTask.call(this, <?php echo $task->id ?>)'><?php echo $task->text ?> </td>
  <td><?php echo $task->status ?></td>
  <td><?php echo $task->controls ?></td>
</tr>

editTask是一个简单的替换功能（将td的内容转换为textarea）

if(block || !($(this).attr('incomplete'))) return; //only one is allowed
block = true;
if(!$(this).children('textarea').length) {
   $(this).html('<textarea style="width: 100%; height: 110px;">'+$(this).html()+'</textarea><br/><input type="button" value="Сохранить" onclick="projects.updateTask.call(this, '+parseInt(id)+')" />');
} 

updateTask的目标是将td中的所有内容替换回textarea的内容，并使用$ .post updateTask的内容将更新请求发送回服务器

var text = $(this).siblings('textarea').val();
//does not work only here, but works anywhere else
$('#tasks-table input').parent().text($('#tasks-table input').siblings('textarea').val())
$.post('/projects/ajax/', {
   ajax: true,
   command: 'update',
   id: id,
   text: text }
  , function() { 
     block = false; 
  }); 

当我以更复杂的方式进行操作时，它会起作用。 这样更简单的方法：

$(this).parent().html(text)

也没用

Answer 1

编辑：重新审视您的问题，看来我关注的重点可能不完全是问题。 我不会删除它，因为它是您发布的代码的有效问题。 无法查询或修改textarea值的问题很可能是因为在DOM加载后添加了textarea 。 您应该可以在表上使用jquery.live（）事件，或者在本文结尾使用委托事件。 两者对于任何当前或将来的DOM元素均有效。 当执行任何DOM操作或基于Ajax的HTML更新时，它们可以节省生命。 这也将解释为什么您能够在控制台中而不是在代码中执行操作。

原始答案：我不确定这是否能完全帮助您，但是我认为阻止您的代码执行的原因是：

if(block || !($(this).attr('incomplete'))) return;

当您的表格单元格没有该属性时，您实际上是在执行：

if( block || !(undefined) ) return;

这将永远是正确的，因为!(undefined)是正确的。 您最有可能想要强制使用布尔值：

if( block || !!(undefined) ) return;

如果只希望使用undefined和任何文本值，则可以。 修改此条件的更好方法是显式检查您期望的值（我假设您期望为“ true”）：

if(block || ($(this).attr('incomplete') === "true") ) return;

建议：

我要提出的一个建议是，不要内联onclick函数，而是使用HTML5 data- *属性存储数据并在一处执行代码。 这有助于将JavaScript放在一个地方，并且不会在整个HTML中混合使用。

例如，您可以为每个表格单元格生成一个data-id属性，并使用data-edit-cell="true"将您的表格行标记为可data-edit-cell="true"

<table>
<tr data-edit-cell="true">
  <td data-id="1">cell one</td>
  <td data-id="2">cell two</td>
  <td data-id="3">cell three</td>
  <td data-id="4">cell four</td>
</tr>
</table>​

然后，第二个建议是，您可以使用jquery.delegate（）来将事件绑定到该行，而不是将click事件绑定到每个单元格，它会监视由选择器（ td ）定义的子项的冒泡事件（ click ）：

var block = false;
$('tr[data-edit-cell=true]').delegate('td', 'click', function() {
    if (block || $(this).attr('incomplete') === "true" ) return; //only one is allowed
    block = true;
    console.log('clicked: ' + $(this).attr('data-id'));
});​

我在这里创建了一个jsfiddle ，因此您可以检出此代码。