1

onclickフレキシグリッドで生成されたテーブルのセルのイベント ハンドラーを動的に生成しようとしています。

// ...
preProcess: function (data) {
    var rows = data.rows;
    for (var i = 0; i < rows.length; ++i) {
        var row = rows[i];
        // If and only if this condition is true, then
        // row.cell[0] must be converted into a hyperlink.
        if (row.cell[1] != '0') {
            // I don't want to use the href attribute, because that would
            // force me to define a non-anonymous function.
            row.cell[0] = '<a href="javascript:void(0)" id="E'
                        + i + '">' + row.cell[0] + '</a>';
            // So I'm going to try assigning the onclick attribute.
            $('#E' + i).click(function () {
                window.open('doc.php?q=' + this.id, 'D' + this.id,
                            'menubar=0,toolbar=0,directories=0,location=0,status=0,' +
                            'resizable=0,scrollbars=0,width=600,height=300');
            });
            $('#E' + i).click().id = row.cell[4];
        }
    }
    return data;
}
// ...

ただし、生成されたハイパーリンクをクリックしても機能しません。どうしたの？閉鎖の私の使用？タグは属性<a>を受け入れませんか?onclick

注: jQuery を使い始めて以来、私のポリシーはすべての関数は無名関数にすることです。通常の機能を使用することを提案しないでください。

4

7 に答える 7

2

あなたが探しているのはlive()のようです:

現在および将来において、現在のセレクターに一致するすべての要素のイベントにハンドラーをアタッチします

実際には、まだ存在しない要素のイベント ハンドラーを作成できます。これを機能させるために、現在のコードに最小限の変更を加えたいだけだと感じています。その場合、コードはからのみ変更されるため、 live() が最適なオプションです。

$('#E' + i).click(function () { ...

に

$('#E' + i).live('click', function () { ...
于 2011-01-27T00:55:08.527 に答える
2

jQuery (またはブラウザーのネイティブ dom 関数) を使用して要素を作成し、イベント ハンドラーをアタッチします。

$('<a href="#" id="E' + i + '"/>').html(row.cell[0]).click(function(e) {
    e.preventDefault();
    // your code
});
于 2011-01-27T00:10:30.207 に答える
1

onclickまだ存在していない要素にイベントをフックしようとしています。当時、要素は配列内のテキストとしてのみ存在します。コードがDOMに追加されていないため、セレクターはそれを見つけることができません。

イベントハンドラーに無名関数を使用する場合は、要素がオブジェクトとして存在するように作成されるまで、イベントをフックするのを待つ必要があります。

于 2011-01-27T00:14:08.480 に答える
1

jQuery のライブイベントを使用します。

何が起こっているかを簡単に確認できるように、リンクにクラスも追加しています。これは、ページに他のリンクがあると想定しているためです。

function preProcess(data) {
    ...
    row.cell[0] = '<a href="#" class="clickMe" id="E' + i + '">' + row.cell[0] + '</a>';
}

jQuery("a.clickMe").live("click", function(event) {
    event.preventDefault();
    window.open('doc.php?q=' + this.id, 'D' + this.id, .....
});

免責事項: flexigrid を使用したことはありませんが、他のコメントから、flexigrid が DOM に配置する前にコンテンツを変更できるようです。

ライブ イベントは、要素が DOM に追加される前に、単一のハンドラー (匿名かどうかに関係なく) を接続します。

参照: jQuery live()

。住む（）

現在および将来において、現在のセレクターに一致するすべての要素のイベントにハンドラーをアタッチします

于 2011-01-27T03:04:07.583 に答える
1

<a>生の文字列連結を使用して作成し、それを割り当てているようです...どこですか? リンクが DOM の一部ではない場合、$('linkID')何も検出されず、クリック ハンドラーが事実上何も割り当てられません。jQuery セレクターは DOM のみを検索します。

于 2011-01-27T00:09:17.753 に答える
1

まず、id='#E' + i を追加しているようには見えません。

したがって、$('#E' + i) を呼び出すと、空の jQuery オブジェクトが返されると思います。これは、$('#E' + i).length をアラートすることで確認できます。0 は何も見つからなかったことを意味します。

次に、javascript:void(0) を呼び出す必要はありません。それを「#」に置き換えて、匿名関数で event.preventDefault() を呼び出すだけです。イベントをパラメーターとして無名関数にも渡す必要があります。

于 2011-01-27T00:10:43.467 に答える
0

私はあなたのコードをコピーし、いくつかの小さな修正を加えた後、それを機能させました。データがテーブル オブジェクトを参照していると仮定しました。これが私のコードとダミーの HTML です。

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>   
  </head>
  <body>
    <table id='myTable'>
      <tr>
        <td>x</td><td>1</td><td>a</td><td>f</td><td>p</td>
      </tr>
      <tr>
        <td>y</td><td>2</td><td>b</td><td>g</td><td>q</td>
      </tr>
    </table>
    <script>
      function preProcess(data) {
        var rows = data.rows;
        for (var i = 0; i < rows.length; ++i) {
        var row = rows[i];
        // If and only if this condition is true, then
        // row.cell[0] must be converted into a hyperlink.
        if (row.cells[1] != '0') {
        // I don't want to use the href attribute, because that would
        // force me to define a non-anonymous function.
          row.cells[0].innerHTML = '<a href="javascript:void(0)" id="E' + i + '">' 
                               + row.cells[0].innerHTML + '</a>';
        // So I'm going to try assigning the onclick attribute.
          $('#E' + i).click(function () {
                  window.open('doc.php?q=' + this.id, 'D' + this.id,
                    'menubar=0,toolbar=0,directories=0,location=0,status=0,' +
                    'resizable=0,scrollbars=0,width=600,height=300');
          });
          //$('#' + id).click().id = row.cells[4];
          }
        }
        return data;
      }  

      $(document).ready(function() {
        preProcess(document.getElementById('myTable'));
      });

    </script>
  </body>
</html>

私の修正は次のとおりです（投稿のコードをコピーしていたときの転記が原因である可能性があると思います）：

  1. セルをセルに置き換えました
  2. セル インデックスの後に innerHTML を追加しました
  3. リンクを javascript.void ではなく javascript:void に設定しました
  4. $('#' + id).click().id = row.cells[4];私はそれが何をするのかわからなかったので、行をコメントアウトしました。

これらの変更により、それは魅力のように機能しました。

これが役立つことを願っています。

于 2011-01-27T00:39:36.563 に答える