JqueryUIダイアログは、私が項目のリストを持っている古いターゲットインスタンス

Question

<div> 
    <ul> 
    <li><a data-id="1" href="#">Show dialog 1</a></li> 
    <li><a data-id="2" href="#">Show dialog 2</a></li> 
    <li><a data-id="3" href="#">Show dialog 3</a></li> 
    <li><a data-id="4" href="#">Show dialog 4</a></li> 
    <li><a data-id="5" href="#">Show dialog 5</a></li> 
    <li><a data-id="6" href="#">Show dialog 6</a></li> 
    </ul> 
</div> 

<div class="dialogTest" style="display: none"> 
<p>Are you shure you want to delete this link?</p> 
<p style="margin-top: 15px; text-align: center;"><button>Delete it!</button></p> 
</div> 
<div class="dialogTestMenu" style="display: none"> 
<p style="margin-top: 15px; text-align: center;"><a href="#">Delete this link</a></p> 
</div> 

$(function() { 
    var ulMenu = function (target) { 

    console.log('target item',target); 

    $('.dialogTestMenu').dialog({ 
     title: 'Item #' + target.dataset.id + ' menu', 
     modal: true, 
     open: function() { 
      var rootDialog = this; 

      $(this).find('a').on('click', function() { 
       $(rootDialog).dialog('close'); 

       $('.dialogTest').dialog({ 
        title: 'Confirm delete #' + target.dataset.id, 
        modal: true, 
        open: function() { 
         var selfDialog = this; 
         $(this).find('button').on('click', function() { 
          console.log('target item to delete',target); 
          $(target).remove(); 
          $(selfDialog).dialog('close'); 
          return false; 
         }); 
        }, 
        buttons: { 
         Cancel: function() { 
          $(this).dialog('close'); 
          $(rootDialog).dialog('open'); 
         } 
        } 
       }); 
       return false; 
      }); 
     }, 
     buttons: { 
      Cancel: function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 

    }; 

    $('ul a').on('click', function() { 
     ulMenu(this); 
     return false; 
    }); 
}); 

でイベントをonclickの。メニュー付きの項目呼び出しダイアログをクリックします。メニュー項目をクリックすると、このリンクが削除されます確認のダイアログが表示されます。 2番目のダイアログからキャンセルして最初のアイテム（たとえば）を削除した後、他のアイテムを削除しようとすると、最初にキャンセルされたアイテムが削除されます。

説明すると、私はのターゲットの古いインスタンスを取得して、2番目のダイアログ内のボタンをクリックして処理しようとすると、なぜですか。

Check out codeは、コンソールを使用して自由に記入してください。

Answer 1

ダイアログを開くたびに.on()を使用するため、ボタンに新しいクリック機能が追加されます。私はあなたのjsFiddleを変更します。 Check it out。私は最新の関数のバインドを解除し、新しいものをバインドします.btwはあなたの構築を少し変更しました。

$(function() { 
    var ulMenu = function() { 
     var $this = $(this); 
     $this.addClass('active'); 

     console.log('target item', this); 

     $('.dialogTestMenu').dialog({ 
      title: 'Item #' + $this.data('id') + ' menu', 
      modal: true, 
      buttons: { 
       Cancel: function() { 
        $(this).dialog('close'); 
        $('.wrap a.active').removeClass('active'); 
       } 
      } 
     }); 

    }; 

    $('.dialogTestMenu a').bind('click', function() { 
     $('.dialogTestMenu').dialog('close'); 

     var $current = $('.wrap a.active'); 

     $('.dialogTest').dialog({ 
      title: 'Confirm delete #' + $current.data('id'), 
      modal: true, 
      open: function() { 
       var selfDialog = this; 
       $(this).find('button').unbind('click').bind('click', function() { 
        console.log('target item to delete', $current.get(0)); 
        $current.remove(); 
        $(selfDialog).dialog('close'); 
       }); 
      }, 
      buttons: { 
       Cancel: function() { 
        $(this).dialog('close'); 
        $('.dialogTestMenu').dialog('open'); 
       } 
      } 
     }); 
    }); 

    $('ul a').on('click', ulMenu); 
});