0

jQueryのclick（）関数に問題があります。

この関数を使用して、データベースに新しいオブジェクトを追加するajax関数を呼び出すリンクをプログラムでクリックします。

フォームを送信すると、新しいリンクを持つ新しいオブジェクトのオブジェクトデータテーブルにtrが追加されます。プログラムでこの新しいリンクをクリックして、オブジェクトのプロパティを読み込み、表示したいと思います。

問題は、tdとlinkを含む新しいtrがDOMに存在せず、関数が機能$.('#elem').click')しないことです。

私は他の投稿で、クリックイベントを次のような新しい.on関数にバインドする必要があることを確認しました：

$('#parent-items').on('click', 'elem', function() {
   // [...]
});

[...]の代わりに何を書かなければならないのかわかりません。JavaScriptコードの最後で、次のようにクリック関数を呼び出します。

$('#myelem').click();

ご協力いただきありがとうございます

4

1 に答える 1

1

実際、それほど難しいことではありません。:)

<table id="list">
    <tr>
        <td>John</td>
        <td><a class="btn-hi">Say Hi!</a></td>
        <td><a class="btn-bye">Say Goodbye!</a></td>
    </tr>
    <tr>
        <td>Lucy</td>
        <td><a class="btn-hi">Say Hi!</a></td>
        <td><a class="btn-bye">Say Goodbye!</a></td>
    </tr>
    <tr>
        <td>Sam</td>
        <td><a class="btn-hi">Say Hi!</a></td>
        <td><a class="btn-bye">Say Goodbye!</a></td>
    </tr>
</table>

<script>
$('#list').on('click', 'a', function() {
    // Wrap the clicked <a> element with jQuery
    var $this = $(this);

    // Get the parent <tr> element
    var $tr = $this.closest('tr');

    // Get all (direct) children elements (<td>) that are inside the current <tr> element
    var $tds = $tr.children();

    // Get the text from the first <td> element in the current row
    var name = $tds.eq(0).text();

    // Get the type (class name) of clicked link
    var type = $this.attr('class');

    if (type == 'btn-hi') {
            alert( 'Hi, ' + name + '!' );
    } else if (type == 'btn-bye') {
            alert( 'Goodbye, ' + name + '!' );
    }
});
</script>

JSBin でこのデモをご覧ください: http://jsbin.com/welcome/38776/edit

<a>クリック イベントは、ユーザーが要素内にある要素をクリックするたびに実行されます<table id="list">。これは「イベント委任」と呼ばれます - http://api.jquery.com/delegate/

したがって、テーブルに行を動的に追加しても、すべてが機能します。

于 2012-10-24T13:22:55.543 に答える