2

deletable" " クラスにある "a" タグのクリック イベントをトリガーする必要があります。SO で同様の質問を見ましたが、次のコードは機能しません。私がやろうとしているのは、から関連を削除すること<li>です<ul>。

    $(document).ready(function () {
      $('.deletable').live("click", function () {
        alert("test"); // Debug
        // Code to remove this <li> from <ul>
     });
   });

<form ...>   
    <ul>
        <li>One<a href="#" class="deletable">Delete</a></li>
        <li>Two<a href="#" class="deletable">Delete</a></li>
        <li>Three<a href="#" class="deletable">Delete</a></li>
    </ul>
</form>

$('...')タグ内で間違ったオブジェクト階層を使用していると思います。しかし、この問題を解決するのに十分な js/jquery/DOM の知識がありません。助けてください。

編集

答えてくれてありがとう、でもどれも私にはうまくいきません。<li>実際、動的に sを追加しています。問題があるかもしれません。チェックしてください、

#sps- リストボックス #add- ボタン #splist- 別のリストボックス #remove- ボタン

$(document).ready(function() {
        $('#add').click(function(e) {
            var selectedOpts = $('#sps option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }

            $('#splist').append($(selectedOpts).clone());
            $('ul').append('<li>' + selectedOpts.text() + '<a href="#" class="deletable" id="id' + selectedOpts.val() + '">Remove</a>' + '</li>');
            e.preventDefault();
        });

        $('#remove').click(function(e) {
            var selectedOpts = $('#splist option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }

            $(selectedOpts).remove();
            e.preventDefault();
        });

    });
4

4 に答える 4

1

$('a.deletable')セレクターを使用できます...これは<a>with classを見つけdeletableます。

あなたもデリゲートイベントを通過することができます..ここにドキュメントがあります

これを試して

$('a.deletable').on("click",function(){
   alert("test"); // Debug
   // Code to remove this <li> from <ul>
   $(this).parent("li").remove();
});

あなたが動的に追加された場合<li>..

 $(document).on("click",'a.deletable',function(){ .... //even more better if u replace the document with closest elements to a.deletable ..like $(form)

live()廃止されました..

于 2013-01-25T06:53:57.667 に答える
1

.live()jQueryのメソッドは非推奨になりました。次のコードで行ったように、を使用$('body')して委任することで、同様の機能を得ることができます。.deletable

$('body').on('click', '.deletable', function(e){
  e.preventDefault();
  // this is the li that was clicked
  $(this).parent().remove();
});

preventDefault メソッドは、href 属性に何か対象がある場合に、リンクが新しいページをロードしないようにするために使用されます。例と同じ HTML 構造を維持する場合は、単純にアンカー要素 ( this) を取得して親を取得し、DOM から削除できます。

を使用する代わりに$('body')、コンテナを .deletable アンカー (この場合は$('ul'). 関数は次のようになります。

$('ul').on('click', '.deletable', function(e){
  e.preventDefault();
  // this is the li that was clicked
  $(this).parent().remove();
});

を使用$('body')すると、ページ上のすべてのイベントをフィルタリングして、.deletable アンカーから発生したかどうかを確認する必要があります。先行する liに範囲ulを限定することで、関数が呼び出される回数を制限し、パフォーマンスを向上させます。

于 2013-01-25T06:56:34.463 に答える
1

まず最初に、jQuery 1.9 を使用している場合、この.live()関数はサポートされなくなりました。以前のバージョンでは、その特定の機能は非推奨であるため、実際には使用しないでください。

そうは言っても、あなたの構文はほぼ正しいように見えます。したがって、ハンドラー関数内の階層が間違っていると思います。

親を削除しようとしている場合、次のようなものが機能するはずです<li>。

$('.deletable').on('click', function (e) {
    // since you're working with a link, it may be doing wonky default browser stuff
    // so disable that for now
    e.preventDefault();

    // then we delete the parent li here:
    $(this).parent('li').remove();
});

本当にデリゲート署名にしたい場合は、次のようなものが機能するはずです。

$('form').on('click', '.deletable', function (e) {
    // same banana
});
于 2013-01-25T06:57:22.843 に答える
0 
$('a.deletable').live("click",function(){
    alert("test"); // Debug
    $(this).parent('li').remove();
});
于 2013-01-25T06:55:23.037 に答える