0

では、始めましょう。

このコードはコンソールで正常に動作し、必要なことを実行します。

$('#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 の内容がテキストエリアに変換されます)。

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 のコンテンツに置き換え、updateTask の $.post コンテンツを使用して更新要求をサーバーに送り返すことです。

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)

あまりにもうまくいきませんでした

4

1 に答える 1

0

編集： あなたの質問を再検討すると、私が焦点を当てた点が正確に問題ではないようです。あなたが投稿したコードの有効な問題であるため、削除しません。textareatextarea 値が照会または変更されないという問題は、DOM がロードされた後に を追加しているためである可能性が最も高いです。テーブルでjquery.live()イベントを使用するか、この投稿の最後にあるデリゲート イベントを使用できるはずです。どちらも、現在または将来の DOM 要素に対して有効です。これらは、DOM 操作または ajax ベースの HTML 更新を実行する際の命の恩人です。これは、コードではなくコンソールで操作を実行できる理由も説明します。

元の回答: これが完全に役立つかどうかはわかりませんが、コードの実行を妨げているのは次のとおりだと思います:

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

表のセルにその属性がない場合、実際に実行しているのは次のとおりです。

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

が真であるため、これは常に真になり!(undefined)ます。ブール値を強制したい可能性が最も高いです：

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

undefinedテキスト値のみを期待している場合は、これで問題ありません。この条件を変更するより良い方法は、期待される値を明示的にチェックすることです (そして、私はあなたが「真」であることを期待していると仮定しています):

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

提案：

onclick 関数をインライン化する代わりに、HTML5 の data-* 属性を使用してデータを保存し、コードを 1 か所で実行することをお勧めします。これにより、JavaScript を 1 つの場所に保持し、HTML 全体で混合することがなくなります。

たとえば、data-id各テーブル セルの属性を生成し、テーブル行を編集可能としてマークできます。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>​

次に、クリックイベントを各 cell にバインドする代わりに、jquery.delegate() を使用して行にイベント をバインドできます。

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 を作成しました。

于 2012-08-08T13:01:13.297 に答える