変更された要素のイベントを再バインドする方法

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

クリックイベント設定ツールを関数にラップし、実際に必要なときに再度呼び出すことをおすすめします。

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