Ajouter un bouton avec Onclick

Soutien
1

Il me manque clairement quelque chose ici.
J’essaie d’ajouter un bouton et de lui attacher un événement onclick.

Dans le HTML d’un composant, j’ai ajouté :

<button id="button_test" class="bottone">Prova</button>

et dans la balise /head, j’ai ajouté :

$('#button_test').on('click', moreDetails);
function moreDetails(e){
console.log(`Listening to: ${e.target.value}`);
}

Mais rien ne se déclenche.

Suis-je vraiment aussi bête ?

F.

2

N’oubliez pas que Discourse est une application Ember.js, vous devez donc respecter les règles d’Ember pour le codage en JavaScript.

Je crois que jQuery va bientôt être entièrement supprimé d’Ember également, ce qui n’annonce rien de bon pour le symbole $.

3

Merci @codinghorror,

est-ce que cela peut être réalisé avec un composant ou ai-je besoin d’un plugin ?

4

Bonjour à tous,

J’ai fini par créer un widget dans la section /head de mon composant, puis je l’ai ajouté dans le modèle Handlebar.

let currentLocale = I18n.currentLocale();
I18n.translations[currentLocale].js.custom_modal_title = “Ma fenêtre modale personnalisée”;

const showModal = require("discourse/lib/show-modal").default;
const h = require("virtual-dom").h;

api.createWidget("modal-button", {
  tagName: "button.btn.btn-primary",

  html(arg) {
    return arg;
  },

  click(arg) {
      if(arg.target.innerText=="+ Nouveau Wisper") {
        $('#create-topic').click();
      } else if(arg.target.innerText=="Aider") {
          window.location.replace("/c/supporto/11");
      } else {
          window.location.replace("/t/invita-amici-a-mywisper/26");
      }
  }
});

api.createWidget("banner", {
  tagName: "div.wrap",
  html() {
    let contents = [];
    contents.push(h("div.hc-column","Plus nous sommes nombreux, mieux ça fonctionne. Partagez avec vos amis, c'est gratuit !"));
    contents.push(h("div.hc-column","Connectez-vous et publiez votre demande d'aide"));
    contents.push(h("div.hc-column","Vous voulez aider ? Cherchez les Wisper dans votre ville"));
    let row1 = h("div.row-cont", contents);
    let h1 = h('div.top-spot',h('h1','myWisper est un endroit où offrir et chercher de l'aide'));
    let inner = [];
    let bottoni = [];
    bottoni.push(h("div.hc-column",this.attach('modal-button','Inviter')))
    bottoni.push(h("div.hc-column",this.attach('modal-button','+ Nouveau Wisper')))
    bottoni.push(h("div.hc-column",this.attach('modal-button','Aider')))
    let row2 = h("div.row-cont", bottoni);
    inner.push(h1,row1,row2);
    return h("div.hc-banner",inner);
  },
});

api.createWidget("banner_mobile", {
  tagName: "div.wrap",
  html() {
    let h1 = h('div.top-spot',h('h1','myWisper est un endroit où offrir et demander de l'aide.'));
    let inner = [];
    let bottoni = [];
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','Inviter')))
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','+ Nouveau Wisper')))
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','Aider')))
    let row2 = h("div.row-cont", bottoni);
    inner.push(h("h1.mobile-header","myWisper est un endroit où offrir et demander de l'aide"));
    inner.push(row2);
    return h("div.hc-banner-mobile",inner);
  },
});
</script>