如何為單個元素添加2個onclick事件方法，該類在jquery的first click事件方法上已動態更改

Question

在此click事件上，它將單擊的元素類從“ fa-pencil-square-o”更改為“ fa-floppy-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-floppy-o'時，我希望此click事件生效，但沒有生效，並且仍然調用上面的第一個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')
        }
    });

});

我基本上要完成的工作是，在元素的類更改時，元素的click事件功能也會發生變化。 但是如何？

Answer 1

您正在使用提供的類將偵聽器直接添加到元素，而不是使用jQuery的on()事件委托將偵聽器添加到父元素，並提供clicked元素的類作為第二個參數。 甚至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使事件從事件目標一直冒泡到附加了處理程序的元素（即，最內層元素到最外層元素），並沿該路徑運行與選擇器匹配的任何元素的處理程序。

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