Les gestionnaires d'événements ne fonctionnent pas

Question

J'ai donc le code suivant que j'utilise pour créer un formulaire que lorsque vous cliquez dans un champ, il s'assure que les données les plus récentes de la base de données sont dans le champ et lorsque vous quittez le champ de formulaire il enregistre la zone de texte dans la base de données. Il y a déjà beaucoup d'autres champs dans le formulaire dans la fonction display() qui fonctionnent. Cependant, c'est le premier champ de base de données avec lequel je travaille qui est une liste (chaîne de caractères), donc j'essaie de comprendre comment les gérer. Quand je cours ceci le html tout semble correct et je peux même voir les événements pour les champs. Cependant, les champs générés avec display_lp ne déclenchent pas les événements onclick ou onblur. Y a-t-il une raison pourquoi?

display_lp(path) = (
    List.mapi(
    x, characterlp ->  textid = "#edit_content_lp_{x}" 
    divid = "#show_content_lp_{x}" 
    <div class="show_content" id={divid} onclick={_ -> edit_lp(path, x) }> 
     {x+1}: 
     <textarea class="edit_content" id={textid} cols="20" rows="1" onblur={_ -> save_lp(path,x) } > 
      {characterlp} 
     </textarea> 
    </div> 
    , /characters[path]/lifepaths) 
) 

display(path) = (
    Resource.styled_page("{path}'s character sheet",["/resources/css.css"], 
       /* a bunch of other irrelevant html *? 
      <div class="show_content" id=#show_content_lp> Lifepaths: { display_lp(path) } 
      </div> 
      <a href="..">Back to Directory</a> 
    ) 
) 

Answer 1

Je l'ai testé avec un code similaire à la vôtre, et il semble que le onclick, onblur sont pas parce que vos identifiants déclenchez sont incorrects, vous devez supprimer les caractères # comme ceci:

textid = "edit_content_lp_{x}" 
    divid = "show_content_lp_{x}" 

Cependant, si vous voulez utiliser #, vous devez faire:

my_id_var = "some_text_{nb}" 
<div id=#{my_id_var}>...</div> 

Avez-vous remarqué la différence?

Answer 2

Ceci est un code minimal montrant comment utiliser onclick, onblur sur une zone de texte.

do_click(_event) = 
    jlog("CLICK: {Dom.get_value(#tt)}") 

do_blur(_event) = 
    jlog("BLUR: {Dom.get_value(#tt)}" 

main() = 
    <textarea id=#tt 
      onclick={do_click} 
      onblur={do_blur)}>Hello</textarea> 

server = Server.one_page_bundle("OpaTest", [], [], main) 

NB: il n'y a pas de problème de mettre le onclick sur la div, mais je voulais garder les choses simples