0

次のように、phpで生成されたhtmlで構成されるナビゲーションバーがあります。

<ul>
<div class="container"><button type="button" name="1" class="delButton" alt="Delete"></button></div>
<a href="/" alt="Home">Home</a>
<div class="container"><button type="button" name="2" class="delButton" alt="Delete"></button></div>
<a href="/" alt="Events">Events</a>
<div class="container"><button type="button" name="3" class="delButton" alt="Delete"></button></div>
<a href="/" alt="Calendar">Calendar</a>
<div class="container"><button type="button" name="4" class="delButton" alt="Delete"></button></div>
<a href="/" alt="About Us">About Us</a>
</ul>

各セットは、削除ボタンとリンクで構成されています。ボタンの name 属性には、mySQL データベースに従って、それに続くリンクの一意の ID が含まれます。

次の jQuery コードを使用して、対応する削除ボタンがクリックされたときにリンクを削除しています。jQuery の ajax メソッドではなく、カスタムの ajax() メソッドを使用していることに注意してください。

$('.container button').click(function() {
     if (confirm('Are you sure you wish to remove this link?'))
        ajax('POST', '/deletelink.php', 'id='+this.name, function(xmlhttp) {
           $('.nav ul').load('/getnav.php');
        });
});

上記のコードは、削除ボタンのいずれかをクリックすると期待どおりに機能し、対応するリンクが削除されます。ただし、1 つのリンクを削除した後で別の削除ボタンをクリックしようとしても、何も起こりません。confirm() アラートボックスも表示されません。これは、2 回目の削除試行で click() 関数が入力されていないことを示しています。

これについての私の解釈は、関数が初めて実行されると、セレクターがクリックされた特定のボタンに解決されるということです。つまり、後で別の「.container ボタン」をクリックしても、この機能に関しては何の効果もありません。

私の評価は正しいですか？もしそうなら、関数がセレクターを特定のオブジェクトに解決するのを防ぐ方法はありますか? そうでない場合、現在設定しているすべての削除ボタンに対して 1 つの機能を使用できる代替手段はありますか?

4

3 に答える 3

2

再度ロードすると、クリック ハンドラが上書きされますgetnav.php。次の構成を使用できます。

$(document).on('click', '.container button', function() {
    // click handler code here
}

セレクターも絞り込むことができるはずです。

$('.nav ul').on('click', '.container button', function() {
    // click handler code here
}

これにより、クリック ハンドラーが<ul>それ自体にバインドされ、.container buttonセレクターを使用してクリック イベントをどこに "送信" するかが決定されます。

以下も参照してください。.on()

于 2012-10-22T01:16:58.177 に答える
1

削除後にコンテンツをロードした後、イベントを再度バインドする必要があります。それを行う最善の方法は、 jQuery を使用することですon。セレクタに一致する DOM に追加された新しい要素を自動的に見つけて、それらをイベントにバインドします。

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

代わりにこれを使用してください

$('.nav ul').on('click', '.container button', function() {
于 2012-10-22T01:19:47.583 に答える
-1

バーが PHP で生成されたものである場合、ループ中に常に onclick を出力にダンプできます。何かのようなもの：

onclick = "deleteLine('<?=$id?>'); void(0); return false;"

次に、次のように、 .click関数を deleteLine という名前の関数に変更できます。

function deleteLine(id) {

私はそれが驚くべき解決策ではないことを理解していますが、それは仕事をするべきです.

于 2012-10-22T01:18:08.363 に答える