1

ボタンとして機能する動的に作成されたアンカータグが複数あります。これらのボタンのいずれかがクリックされたときに、別のファイルにある単一のjavascript関数を呼び出して、残りの楽しい作業を実行したいと思います。私の問題は、「onclick」イベントを介して関数を適切に呼び出すことができないことです。そのため、それを回避する方法を見つけようとしていますが、それは私にとってそれほど単純ではありません。

私はさまざまな方法を試したので、このアプローチのいくつかの制限を理解しています。

Javascriptを使用した標準のHTMLアンカー：

<a href=#" onclick="doSomething(parameter1, parameter2, ...);">Button</a>

同期の問題があり、ほとんどの場合、クリックすると上記のhrefが選択されることがわかったため、これは役に立ちません。私は実際にこの方法で作業したいと思っています。ここで回避策を知っている場合は、私に知らせてください。

JQueryを介したバインド：

$(document).ready(function() {
     $("#button_id").click(function() {
         doSomething(parameter1, parameter2, ...);
     });
});

バインディングに関する私の問題は、ページがロードされるときに、データベースからデータを取得してリストに表示する関数があることです。各リスト要素にはボタンがあり、「クリックすると」javascript関数を呼び出し、リスト要素から提供する必要のあるデータに応じてパラメーターを渡し、それから何かを実行します。

Bindingが正常に機能するためには、各ボタンに独自のIDが必要であり、Bindingメソッドに簡単に関連付けることができることを理解しています。ただし、.click関数にIDの数を指定する方法や、これらのパラメーターを指定する方法がわかりません（他のJS関数を呼び出してボタンIDを介してそれらをキャプチャしない限り）。

任意の提案/アイデアは大歓迎です！

編集：「doSomething（parameter）;」のパラメーターにbutton_dataを追加するにはどうすればよいですか？働き？

list_element = '<span class="ui-li-count" data-mini="true">' + button_data + '<a href="#" class="my_button">Button</a>';</span>

このデータはデータベースから動的に取得され、ページが最初に読み込まれたときにサイトに投稿されることに注意してください。

4

3 に答える 3

7

これには を使用する必要はありませんid。要素のグループに同一の機能を与えているため、これは必要なことの反対です。class代わりに、それらをグループ化するためにそれらを与える必要があります:

<a href=#" class="my-button">Button</a>

そして JavaScript:

$(document).ready(function() {
     $('body').on('click', '.my-button', function() {
         doSomething(parameter1, parameter2, ...);
     });
});

.my-buttonこれにより、まだ作成していないものも含め、すべての要素にクリック イベントがバインドされます。bodyこれを少し速くするために、すべてのボタンを含む親要素に置き換えます。

于 2012-07-09T20:23:24.843 に答える
1

.on() 関数を使用します。

http://api.jquery.com/on/

次のように特定のプレフィックスを id に追加して、test_<id>ワイルドカード セレクターを使用することもできます。

$("[id^=test]").on('click', function () {
    doSomething();
});
于 2012-07-09T20:25:02.077 に答える
1

または、私のように生の JS を好む場合:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<script type="text/JavaScript">

function createAnchor( strParentElementId, strLinkText, strLinkHref, intArg1, intArg2 ) {

    var objAnchor   = null;
    var objParent   = document.getElementById( strParentElementId );
    var boolCreated = false;

    if ( objParent != null ) {

        objAnchor = document.createElement( 'A' );
        if ( objAnchor != null ) {

            with ( objAnchor ) {
                style.color = 'yellow';
                innerText   = strLinkText;
                href        = strLinkHref;
                onclick     = function() { doSomething( intArg1, intArg2 ); }
                } //with

            objParent.appendChild( objAnchor );

            boolCreated = true;
            } //if-create-element
       }  //if-get-parent

return boolCreated;
}

function doSomething( intArg1, intArg2 ) {
    alert( 'doSomething( ' + intArg1.toString() + ', ' + intArg2.toString() + ' );' );
return true;
}

</script>

<body>

<a name="hello">Hello</a><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<a name="world">World!</a><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />


<div id="myDiv1" style="background-color:red;"></div><br />
<div id="myDiv2" style="background-color:red;"></div><br />


<script type="text/JavaScript">
createAnchor( 'myDiv1', 'Link 1 - Hello', '#hello', 1, 2 );
createAnchor( 'myDiv2', 'Link 2 - World', '#world', 3, 4 );
</script>

</body>
</html>
于 2012-07-09T20:50:16.237 に答える