如何在修改後的元素上重新綁定事件

Question

這是我的問題：

我有一個應答器，我設置了一個onclick事件。 當我完成我的traitement，我無法回憶它。

這裏是我的代碼部分：

$('.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

我建議將你的點擊事件設置器包裝到一個函數中，並在實際需要時再次調用它。

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 
});