如何爲單個元素添加2個onclick事件方法，該類在jquery上的第一個點擊事件方法上有動態變化

Question

在此點擊事件中，它將點擊元素類從'fa-pencil-square-o'更改爲' FA-軟盤-O」。

$("i.fa.fa-pencil-square-o").click(function() { 
    var parentid = $(this).parent().attr('id'); 
    var parent = $('tr#' + parentid); 

    var rtn; 
    var rtd; 

    if (parent.find('td:nth-child(4)').text() == 'No') { 

     rtn = parent.find('td:nth-child(2)').text(); 
     rtd = parent.find('td:nth-child(3)').text(); 

     parent.find('td:nth-child(2)').empty(); 
     parent.find('td:nth-child(3)').empty(); 

     //changes class here 
     parent.find('td:nth-child(5)').empty(); 
     parent.find('td:nth-child(5)').append('<i class="fa fa-floppy-o" aria-hidden="true"></i>'); 


     parent.find('td:nth-child(2)').append('<input type="text" id="rtName" />'); 
     parent.find('td:nth-child(3)').append('<input type="text" id="rtDescription" />'); 

     $(parent).find('input#rtName').val(rtn); 
     $(parent).find('input#rtDescription').val(rtd); 
    } 

}); 

當類的同一個點擊的元素變化爲「FA-軟盤O」我想要這個click事件才能生效，但它不和仍然調用上面的第一個點擊事件。

$('.fa-floppy-o').click(function() { 
    var parent = $(this).parent(); 
    var rtn = parent.find('input#rtName'); 
    var rtd = parent.find('input#rtDescription'); 

    $.ajax({ 
     url: '/editRoomType', 
     async: false, 
     type: 'POST', 
     data: { 
      roomTypeID: parent.attr('id'), 
      roomTypeName: rtn.val(), 
      roomTypeDescription: rtd.val() 
     }, 
     dataType: 'json', 
     success: function (data) { 
      if (data.isSuccessful) { 
       $('#msgdiv').css("display", "inline"); 
       $('#msg').empty(); 
       $('#msgdiv').removeClass('alert-danger'); 
       $('#msgdiv').addClass('alert-success'); 
       $.each(data.Message, function (key, value) { 
        $('#msg').append(value + '<br />') 
       }) 
       $('.table-details tbody').empty(); 
       parent.find('td:nth-child(5)').empty(); 
       parent.find('td:nth-child(5)').append('<i class="fa fa-pencil-square-o" aria-hidden="true"></i>'); 
       getRoomType(); 

      } else { 
       $('#msgdiv').css("display", "inline"); 
       $('#msg').empty(); 
       $('#msgdiv').removeClass('alert-success'); 
       $('#msgdiv').addClass('alert-danger'); 
       $.each(data.Message, function (key, value) { 
        $('#msg').append(value + '<br />') 
       }) 
      } 
     }, 
     error: function() { 
      alert('error accounts') 
     } 
    }); 

}); 

我基本上想要完成的是當元素的類改變時，元素的點擊事件函數改變。但是如何？

Answer 1

您正在使用提供的類將偵聽器直接添加到元素，而是使用jQuery的on()事件委派將偵聽器添加到父元素，並提供點擊元素的類作爲第二個參數。即使document的作品。

這是jQuery的on()事件處理程序的定義：

.on(events [, selector ] [, data ], handler) 

改變這一行：

$("i.fa.fa-pencil-square-o").click(function() { 

這樣：

$(document).on("click", "i.fa.fa-pencil-square-o", function() { 

這行：

$('.fa-floppy-o').click(function() { 

這樣：

$(document).on("click", ".fa-floppy-o", function() { 

其原因是：jQuery的將那些聽衆一旦頁面加載時。因爲它找不到類.fa-floppy-o的任何內容，所以它不會添加偵聽器。這是重命名（重新分類）元素，以及在頁面加載後由jQuery/Javascript動態生成的元素。

事件將從元素中冒泡到父元素，並且父元素將檢查元素是否具有在第二個參數中提供的選擇器。

更多關於事件冒泡：在文檔中

直接和委派事件

大多數瀏覽器事件泡沫，或傳播，從最深， 最裏面的元件（事件目標），其中它們發生 一直到身體和文檔元素。

...

當提供一個選擇器，該事件處理程序被稱爲 委派。當事件直接發生在綁定元素的 上時，不會調用處理函數，但僅對於 與選擇器匹配的後代（內部元素）。 jQuery將事件從事件目標 冒泡到處理程序所在的元素（即，，最內層爲 最外層元素），併爲匹配選擇器的路徑上的任何元素運行處理程序。

這裏是爲on()函數文檔中的jQuery：http://api.jquery.com/on/