1

私はこのHTML5コードを持っています(例えば):

  <form id="peopleFormView">
     <input type="checkbox" name="name1" value="5" />
     <input type="checkbox" name="name3" value="2" />
     <input type="checkbox" name="name4" value="3" />
  </form>

  <table id="domain5">
     <tbody></tbody>
  </table>

このコードは JS で処理されます。

 $(function(){
   registerPerformersClickHandler();
 });

 function registerPerformersClickHandler(){

   $('#peopleFormView input').click(function(){
     var IdPerson = $(this).val();

     if ($('#performer'+IdPerson).length == 0){
         performer.add(IdPerson);
     }
     else{
         performer.del(IdPerson);
     }

 });

 var performer = {
     del: function(IdPerson){
       $('#performer'+IdPerson).remove();
    }
 }

要素が存在するという認識 $('#performer'+IdPerson).length == 0 は正常に機能しますが、要素が追加されると

  <tr id="performer5">
    <td>Surname name</td>
  </tr>

同じ入力をもう一度クリックすると、JS は performer.del() を正しく呼び出しますが、何も起こらず、エラーも反応もありません。次のように remove を 2 回呼び出すと:

var performer = {

 add: function(IdPerson){
    var requestData = {
        className : 'Performer',
        method : 'getPerformerRowView',
        params : IdPerson
    };

    $.post(openAjaxLoader, requestData)
       .success(function(data){
          orchestraDomain.addPerformerToDomain(data.IdDomain, data.performer);
       })
       .error(function(data){
          window.alert(data.error);
       })
 }
 ,
 del: function(IdPerson){
    alert( $('[id=performer'+IdPerson+']').length ); 
    $('#performer'+IdPerson).remove();
    $('#performer'+IdPerson).remove();
 }

}

var orchestraDomain = {

 addPerformerToDomain: function(IdDomain, performer){
     $('#domain'+IdDomain+' tbody').append(performer);
 }

}

.. できます。通話がこの方法である場合

 var performer = {
     del: function(IdPerson){
       $('#performer'+IdPerson).remove().remove();
    }
 }

.. うまくいきません。私は問題を見ていない、あなたの誰かを見ていますか？

:: 何か魔法ってありますよね？

4

1 に答える 1

2

ID が重複しています。これが私が考える理由と確認方法です。

ID による要素の削除は、一度だけ行う必要があります。2 回行う必要がある場合は、その ID を持つ 2 つの要素があります。

.remove().remove()最初の .remove は選択されたすべての要素を削除するため、機能しません。選択した要素のみを削除しますが、これは 1 つの要素のみである必要があります。

要素を 2 回選択して 2 回削除すると、目的の結果が得られるという事実は、その ID を持つ 2 つの要素があることも確認します。以下は、実行できるもう 1 つのテストです。

var performer = {
    del: function(IdPerson){
        alert( $('[id=performer'+IdPerson+']').length ); // if > 1, your html is invalid and you have duplicate id's.
        $('#performer'+IdPerson).remove();
    }
}
于 2012-08-20T15:00:58.273 に答える