How to bind events on dinamically created html?

Question

I have a project in wich when you click tags, the information in the mid section will change by calling a function that changes the current value of the model that is shown as HTML in that specific section.

If the generated HTML has more tags, how do you bind them to make them call the same mentioned function as the other tags?.

Right now when you click the tag in the middle the method is not called and nothing changes, but when you click the tags in the upper the part mid section gets re-rendered. I've tried with another call to applyBindings but that made the upper tags to duplicate.

This is the code of the function I want to call:

 @Function
    static void changeFP(final Dictionary model) {
        String searchP = model.getSearchPhrase();
        final List<String> listOfTerms = model.getTermList();
        for (int i = 0; i < listOfTerms.size(); i++) {
            final String term = listOfTerms.get(i);
            if (stringsAreEqual(term, searchP)) {
                model.setFoundPhrase(term);
                model.setDescription(model.getDefinitionList().get(i));
                model.setCode(model.getExampleCodeList().get(i));
                return;
            }
        }
        model.setDescription("");
        model.setCode("");
        model.setFoundPhrase(
                ResourceBundle.getBundle(
                        "web/aprendiendola/dictionaryweb/aprendiendola/dictionary/DiccionarioDeJava/TranslateMe"
                //        , Locale.getDefault()
                //  ,new Locale("ES")
                ).getString("NOTFOUND"));
    }

The part where it should render is:

<div class="card-panel blue lighten-2">
  <h3 data-bind="text: foundPhrase"></h3>
  <p class="white-text" data-bind="html:description" style="min-height: 100px;"></p>
</div>

The text that should be rendered is:

CLASS_INFO= <p>Represent types of objects, but can also refer to other non-object conceps as <a class="chip blue lighten-3 white-text" href="#" data-bind="click:$root.changeSP ">Package-Info</a></p>

(the CLASS_INFO= is because the app is getting internationalized)

Answer 1

If you want to apply a binding for a specific part of your html, instead of myModel.applyBindings() you can do:

Models.applyBindings(myModel, "id_of_tag");

That allows you to bind different parts of the page to different models. Let me know, if that solves your problem. If not I'll have to look at the whole project to see how to fix it.