2016-11-08 57 views
3

我在尋找類'install-plugin'的單擊偵聽器上有一個jQuery。JQuery - 觸發器類互換時點擊偵聽器不會觸發

單擊時,它將類(通過jQuery)更改爲「delete-plugin」。

反之亦然,所以有一個'delete-plugin'的監聽器,當點擊它時,將類更改爲'install-plugin'。

我遇到的問題是,這隻能工作一次,雖然我可以看到正確的更新了頁面上的類,jQuery似乎並沒有看到,仍然觸發原始偵聽器。

(ajax對於預期的擴展功能是必需的)。是否有可能讓jQuery始終與頁面上的內容保持最新而不用刷新它?

$(document).ready(function() { 
    $('.install-plugin').click(function() { 
     var id = $(this).attr('id'); 
     var postData = { 
      action : 'install_plugin', 
     } 
     $.ajax({ 
      method: 'POST', 
      url: "/wp-admin/admin-ajax.php", 
      data: postData, 
      success: function(response) { 
       $('#'+id).text('Delete'); 
       $('#'+id).removeClass('install-plugin'); 
       $('#'+id).addClass('delete-plugin'); 
      } 
     }); 
    }) 

    $('.delete-plugin').click(function() { 
     var id = $(this).attr('id'); 
     var postData = { 
      action : 'delete_plugin', 
     } 
     $.ajax({ 
      method: 'POST', 
      url: "/wp-admin/admin-ajax.php", 
      data: postData, 
      success: function(response) { 
       $('#'+id).text('Install'); 
       $('#'+id).removeClass('delete-plugin'); 
       $('#'+id).addClass('install-plugin'); 
      } 
     }); 
    }) 
}); 

回答

2

使用 '上' 的語法,如$(selector).on('click',function(event){....})用於動態更改的元素。

.click() fails after dom change

+0

還可以分配(代表),將總是存在於DOM中的父元素的監聽器。例如,這將監聽稍後添加到頁面中的DOM元素上的單擊事件。請參閱[瞭解事件委派](https://learn.jquery.com/events/event-delegation/) –

1

嘗試

$(document).on('click', '.delete-plugin', function() { 
    // your delete logic here 
}); 

$(document).on('click', '.install-plugin', function() { 
    // your install logic here 
}); 

你的問題是,你在$('.install-plugin')分別$('.delete-plugin')您clickHandlers綁定只有一次。我的建議可以防止這種行爲。

順便說一句: 你可以簡化你的代碼在你的ajax successHandler。

`$('#'+id).text('Delete') 
      .removeClass('install-plugin') 
      .addClass('delete-plugin');` 

也都在可以把功能,如:

$(document).on('click', '.install-plugin, .delete-plugin', function() { 
     var action = ($(this).hasClass('install-plugin')) ? 'install_plugin' : 'delete_plugin'; 

     var id = $(this).attr('id'); 
     var postData = { 
      action : action, 
     } 

     .... 
    });