1

<lijquery を使用して動的に作成された> リストがあります。リストには、リスト項目を削除するための入力フィールドとマイナス アイコンがあります。リストに新しいアイテムを挿入するサンプル コードを次に示します。

$list = $("#servicesList");
$list.append(""<li data-value='" + uniqueIdentifier + "'>
(same line) <input type='text' class='input-mini' id='price' value='2500'>
(same line) <i id='icon-minus' class='icon-minus-sign'></i></li>

このリスト アイテムは、ul アイテムである div servicesList に動的に追加されます。

<ul id="servicesList">
</ul>

ここで、誰かがリスト アイテムのマイナス アイコンをクリックしたときにアイテムを削除する必要があります。リスト アイテムは動的に生成されるため、ドキュメント メソッドを使用してクリック イベント リスナーを追加しています。動作しないコードは次のとおりです。

$(document).on('click','#icon-minus',function() {
    var $list =  $("#servicesList"),
    listValue = $(this).attr("data-value");
    $list.find('li[data-value="' + listValue + '"]').slideUp("fast", function() 
            {
              $(this).remove();
            });

上記のコードは機能しません。「#servicesList li」をオンクリック関数に渡すと、コードは機能しますが、テキスト入力フィールドをクリックしてもリスト項目が削除されます。マイナスアイコンをクリックしたときだけリスト項目を削除したい。

4

5 に答える 5

2

マイナスをクリックすると、親要素ではなく要素$(this)を参照するため、 で適切な値を取得できません。<i><li>var listValue

icon-minus第二に、ページには複数のアイコンマイナスがあるため（IDは一意です）、IDではなくクラスを使用したいと思います。

例: http://jsfiddle.net/X9nFX/5/

于 2013-01-04T12:15:48.350 に答える
1

このコードを試してみましたが、これは機能しています: http://jsfiddle.net/Vc3zg/

$("#servicesList").append('<li><input type="text" value="" /> <span id="icon-minus">X</span></li>');

$(document).on('click', '#icon-minus', function() {
   var $list = $("#servicesList"),
   listValue = $(this).attr("data-value");
   $list.find('li').slideUp("fast", function() {
       $(this).remove();
   });
});
于 2013-01-04T12:14:11.747 に答える
0

ID は常に一意である必要があります (ID と呼ばれるのはそのためです)。したがって、すべての ID をクラスに変更して、これを試してください。

$(document).on('click','#icon-minus',function() {
  var $list =  $("#servicesList"),
  
  $(this).parent().slideUp("fast", function() 
  {
      $(this).remove();
   });
于 2013-01-04T12:07:08.340 に答える
0

すべてのボタンが同じ ID を共有し、
IDページごとに一意である必要があると思います。ボタンの代わりにクラスを使用する

そして、あなたの引用符をあなたの中に修正してください$list.append(

于 2013-01-04T12:07:18.297 に答える
0

最初の問題は、すべて同じicon-minus id属性を持つ潜在的に複数の要素を追加していることです。HTML ページではid、各要素の属性は一意でなければなりません。代わりにクラスの使用に切り替えます。

$(document).on('click','.icon-minus-sign',function() {

次の問題はthis、イベント ハンドラーの関数内で<i>要素が参照されるため、次の行です。

listValue = $(this).attr("data-value");

動作しません。によって参照される要素には属性がthisありません。代わりに、要素を含むにアクセスする必要があります。data-value<li><i>

$(this).closest('li').slideUp("fast", function() {
    $(this).remove();
});
于 2013-01-04T12:09:11.170 に答える