javascript - 如何在修改后的元素上重新绑定(bind)事件

Question

这是我的问题:

我有一个应答器，我在其中设置了一个 onclick 事件。当我完成我的特质时，我不记得了。

这是我的部分代码:

$('.editAction').click(function (event) {
//Some stuff
handleEditThemeAjax(this, themeId, nomThemeEn, nomThemeFr);
//Call to another function
return false; //Do not redirect to URL
});

function handleEditThemeAjax(bouton, themeId, nomEn, nomFr) {
     $(bouton).unbind("click");
     $(bouton).removeClass("editAction"); //To not get another call to the parent function

//unset url to avoid being redirected
bouton.removeAttribute("href");

//Some stuff and declaration
$(bouton).click(function () {
    //AJAX Handle
    $.ajax({
        type: "POST",
        url: "{{ path('editThemeAjax') }}", //Twig
        data: {
            "nomFr": newNomFr,
            "nomEn": newNomEn,
            "themeId": themeId
        },
        success: function (data) {
            setInputToText(tdFr, newNomFr);
            setInputToText(tdEn, newNomEn);
            Materialize.toast(data, 2000, 'rounded');
        },
        error: function (data) {
            console.log(data);
            Materialize.toast("Une erreur est survenue lors de l'édition de la thématique");
        }
    });
}

//Let's put the button to it initial state

var tr = tdEn.parentElement;
lineButton = tr.childNodes[7];

//The button
var boutonDone = lineButton.childNodes[1];
$(boutonDone).removeClass("green");
$(boutonDone).addClass('blue editAction');
boutonDone.childNodes[1].innerHTML = "mode_edit";

// Clone the button to remove all previous event
var clone = boutonDone.cloneNode();
while (boutonDone.firstChild) {
    clone.appendChild(boutonDone.lastChild);
}

//replace it
boutonDone.parentNode.replaceChild(clone, boutonDone);

clone.href = url;
//Set the url again

//Now, if i click on my button again, nothing append. 
//I would like that if i clicked again, my first function is executed (the "$('.editAction').click(...)")

});
return false; //avoid being redirected
}

我能做些什么来修复它？

预先感谢您的帮助!

Answer 1

我建议将您的点击事件 setter 包装到一个函数中，并在您实际需要时再次调用它。

var set_editAction_click_events = function (themeId, nomThemeEn, nomThemeFr) {
    $('.editAction').click(function (event) {
        //Some stuff
        handleEditThemeAjax(this, themeId, nomThemeEn, nomThemeFr);
        //Call to another function
        return false; //Do not redirect to URL
    });
}

// ... your code ...

//The button
var boutonDone = lineButton.childNodes[1];
$(boutonDone).removeClass("green");
$(boutonDone).addClass('blue editAction');
boutonDone.childNodes[1].innerHTML = "mode_edit";

// Set click events again
set_editAction_click_events(themeId, nomThemeEn, nomThemeFr);

或者如果您不想将代码包装在函数中:

$(boutonDone).click(function() {
    handleEditThemeAjax(this, themeId, nomThemeEn, nomThemeFr);
    //Call to another function
    return false; //Do not redirect to URL
});