1

カラーボックス ウィンドウに表示されるプロファイルのリストがあります。リスト内の各アイテムには、それらを最終リストに追加するための「+」ボタンがあります。チェック (if($('#id').length == 0)) を追加して、要素が既に最終リストにあるかどうかを確認し、リストに 2 回追加されないようにしました。

カラーボックスが初めて読み込まれると、すべてが正常に機能します。ただし、カラーボックスを閉じて再度開くと、要素が $.colorbox.close イベントで破棄されなかったため、if 条件が失敗します。要素はドキュメント内にまだ存在しますが、コンテンツが外部 URL から再ロードされているため、カラーボックス ウィンドウには表示されません。これにより、「最終リスト」が空の場合でも、「このメンバーはすでにリストに含まれています」という警告ボックスが表示されます。

$(document).on('click', "a.add_to_list", function() {
    var new_id = 'final_'+$(this).data('id');
    var html = '<li id="'+new_id+'"><a data-id="'+new_id+'" class="remove label label-important right "><i class="icon-minus icon-white"></i></a>' + $('#'+id).html() + '</li>';
    if($('#'+new_id).length == 0) {
        $('#final_list').append(html);  
    }
    else
    {
        alert('This Member is already in the list');
    }       
});

 $(document).on('click', "a.remove", function() {
    remove_id = $(this).data('id');
    $('#'+remove_id).remove();
});

HTML

<ul id="list1"><li id="user1"><a class="right add_to_list label label-important" data-id="'user1'"><i class="icon-plus icon-white"></i></a><a href="http://localhost/test/profile/user1" class="align-left">
  <img width="60px" height="60px" src="http://localhost/test/files/profile_img/user1.jpg" class="avatar photo"></a><p>User 1</a><br>@user1<br>Description</p></li></ul>

最終リストに追加された要素

<ul id="final-list"><li id="final-user1"><a class="right remove label label-important" data-id="final_user1"><i class="icon-plus icon-white"></i></a><a href="http://localhost/test/profile/user1" class="align-left">
      <img width="60px" height="60px" src="http://localhost/test/files/profile_img/user1.jpg" class="avatar photo"></a><p>User 1</a><br>@user1<br>Description</p></li></ul>

colorbox.close イベントで要素を破棄して、カラーボックスが 2 回目に開かれたときにドキュメントに存在しないようにします。colorbox.close イベントの実行を close() メソッドから remove() メソッドに変更してみました。それは仕事をしましたが、完全なカラーボックス要素を削除します。これにより、ページをリロードするまでカラーボックスを再度開くことができなくなります。

4

2 に答える 2

1

私は、この問題の問題を見つけたと思います。カラーボックスの「onComplete」関数内に jQuery コードを追加しました。ここで、カラーボックスを 2 回目にロードした後、同じ jquery コードが再度ドキュメントに追加され、クリック イベントが 2 回発生します。

今、私には2つの選択肢があります。

  1. カラーボックスの onComplete 関数の外でコードを使用します。(この方法でコードを動作させることはできません)。
  2. カラーボックスを閉じるときにロードされた jquery コードを削除します。

この問題を解決するための解決策を見つけてください。

于 2013-08-23T07:49:09.080 に答える
0 
$(document).on('click', "a.remove", function() {
 remove_id = $(this).data('id');
 $('#'+remove_id).remove();
});

これを使用してください.. $(this).data('id') には既に「final_」が含まれています。もう一度追加する必要はありません

于 2013-08-23T06:08:10.067 に答える