0

私のウェブページで奇妙なことが起こっています。

ボタンをクリックしたときにjqueryの確認ダイアログを追加したい。問題は....そのボタンがページに複数あり、それぞれに「id」があり、phpによって作成されます（したがって、ページに2、3、4、5のボタンが存在する可能性があります）。

ボタンは次のようになります。

            <a href="#" id="confirm" onclick="addlist(<?php echo $v['id'];?>);return false;"><img src="img/item_add.png" alt="add" width="100" height="46" /></a>

そして、これは私のjqueryです

  $(document).ready( function(){

$('#dialog').dialog({
    autoOpen: false,
    width: 600,
    buttons: {
        "Ok": function() {
            $(this).dialog("close");
        },
    }
});

$('#confirm').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});​

問題は、私の jquery コードが正常に動作していることですが、最初のボタン、2 番目、3 番目のボタンなどについてのみです。

ここに私の例があります: http://jsfiddle.net/S4vSU/1/

そのダイアログをすべてのボタンで機能させたいです。問題はどこだ ？

前もって感謝します ！

4

5 に答える 5

5

特定の要素の" id" はページ全体で一意である必要があります....
そうでない場合は、1 つ (最初の) 要素のみが処理されます....

解決策：すべてのボタンにいくつかのクラスを与え、クラス名によるidプロセスの代わりに

例えば：

<a class="temp" href="#" id="confirm" onclick="addlist(<?php echo $v['id'];?>);return false;">
    <img src="img/item_add.png" alt="add" width="100" height="46" />
</a>

他のコードは

$(document).ready( function(){

$('#dialog').dialog({
    autoOpen: false,
    width: 600,
    buttons: {
        "Ok": function() {
            $(this).dialog("close");
        },
    }
});

$('.temp').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});​
于 2012-05-21T11:25:02.357 に答える
1

これは、すべてのボタンが同じ id を持っているためです。html の要素の ID は一意である必要があります。

私がここでやっているように、あなたはすべて同じクラスを持ち続けることができます

于 2012-05-21T11:22:02.297 に答える
1

クラスを使用するか、次のような別の ID を使用します。

$('#confirm1, #confirm2').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});

またはクラスを使用: jsFiddle

于 2012-05-21T11:23:32.963 に答える
1

idアイテムごとに一意である必要があります..しかし、推奨されていませんが、使用して逃げることができますon():

http://jsfiddle.net/S4vSU/7/

$(document).on('click','#confirm', function() {
    $('#dialog').dialog('open');
    return false;
    });
});​
于 2012-05-21T11:24:37.660 に答える
1

要素のIDの代わりにクラスを使用し、クリック機能でも使用できます。

<a class="confirm" href="javascript:;">Confirm 1</a>
<a class="confirm" href="javascript:;">Confirm 2</a>
...
$('.confirm').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});​
于 2012-05-21T11:27:56.747 に答える